Question

我正在尝试学习如何使用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字段设置为{ {1}}？我试过了，但是没有用。此外，如果我只删除外部的{ color: 'red' }字段，它将停止将颜色设置为红色！为什么有必要？我还不明白将focused传递到classes的意义是-如果再次将其删除，它也不会导致焦点标签变成红色。

Answer 1

workspace("workspaceId").request是InputLabel的控制器包装器。它从FormLabel中读取上下文，以根据所使用的变体来应用样式。它使用FormControl作为其他样式逻辑。因此，您必须显式传递仅用于classes的类。

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

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

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

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

1 个答案: