Как работает стиль в интерфейсе материалов для изменения цвета метки фокуса? - PullRequest
Новая
       12

Как работает стиль в интерфейсе материалов для изменения цвета метки фокуса?

0 голосов
/ 17 октября 2018

Я пытаюсь научиться стилю с JSS.Я хотел изменить цвет метки в InputLabel, когда он сфокусирован.В конце концов я заставил его работать со следующим кодом, но я не понимаю, почему он работает: 

import React from 'react'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'
import { FormControl, InputLabel, Select, } from '@material-ui/core/'

const styles = theme => ({
  inputLabel: {
    '&$focused': {
      color: 'red',
    },
  },
  focused: {
  },
})

class Test extends React.Component {

  render() {
    const { classes } = this.props;

    return(
      <div>
        <FormControl>
          <InputLabel className={classes.inputLabel} FormLabelClasses={ classes }>Select</InputLabel>
          <Select/>
        </FormControl>
      </div>
    )
  }
}

Test.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(Test)

В частности, я не понимаю, почему я не могу просто установить красный цвет на внешнем focused поле.Я также не уверен, что понимаю, что делает &$focused - я думал, что это просто ссылка на внешнее поле focused, но если так, то почему я не могу просто установить внешнее поле focused на { color: 'red' }?Я попробовал это, и это не работает.Кроме того, если я просто удалю внешнее поле focused, он перестанет устанавливать красный цвет!Зачем это нужно?Я также не понимаю, в чем смысл передачи classes в FormLabelClasses - опять же, если я уберу его, это не приведет к тому, что сфокусированная метка станет красной.

1 Ответ

0 голосов
/ 17 октября 2018

InputLabel - это оболочка контроллера для FormLabel.Он читает контекст из FormControl для применения стилей в зависимости от используемого варианта.Он использует classes для дополнительной логики стиля.Вот почему вы должны явно передавать классы, которые предназначены только для FormLabel.

. Чтобы ответить на вопрос, почему вы не можете просто применить цвет к focused, прочитайте «Внутренние состояния» в разделе https://material -ui.com / customization / overrides / # overriding-with-classes .

Вы должны определить его с пустым объектом, чтобы JSS мог выбрать его как className и разрешить вложенныйссылки на это правило.Это также объясняется в связанном разделе.

Надеюсь, что достаточно ответит на все вопросы.Если документация неясна, вы всегда можете открыть вопрос или подать PR в https://github.com/mui-org/material-ui.

...