css - 样式如何在Material UI中工作以更改焦点标签的颜色？

我正在尝试学习如何使用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的意义是-如果我再次删除它，它不会导致焦点标签变成红色。

最佳答案

InputLabel是FormLabel的控制器包装。它根据所使用的变体从FormControl读取上下文以应用样式。它将classes用于其他样式逻辑。这就是为什么您必须显式传递仅用于FormLabel的类的原因。

要回答为什么不能简单地将颜色应用于focused的问题，请阅读https://material-ui.com/customization/overrides/#overriding-with-classes下的“内部状态”。

您必须用一个空对象定义它，以便JSS将其选择为className并允许对该规则的嵌套引用。链接部分也对此进行了说明。

希望能充分回答所有问题。如果文档不清楚，您可以随时在https://github.com/mui-org/material-ui打开问题或提交PR。