Question

我正在尝试在材质UI中更改TextField的内置颜色。我已经用CSS完成了。我提到了材料UI中的CSS注入顺序，还提到了一些stackoverflow答案，并找到了解决方案。但是我什至以其他不同的方式尝试了这一点。我不确定为什么它不起作用，有人可以解释下面两个代码片段的区别吗？

TextField的js代码是：

 <TextField
          id="standard-name"
          label="Name"
          value={this.state.name}
          onChange={this.handleChange('name')}
          margin="normal"
          fullWidth
          InputLabelProps={{
            classes: {
              root: classes.main,
              focused: classes.focusedLabel
            }
          }}
          InputProps={{
           classes: {
            root: classes.underline
           }
          }}
        />

和CSS（有效的）：

const styles = theme => ({
  main: {
    "&$focusedLabel": {
      color: "cyan"
    },
  },
  focusedLabel: {},
  underline: {
    "&:after": {
      borderBottom: `2px solid cyan`
    }
  },
});

我进行了一些更改，并使用了CSS属性:focus。但是现在颜色不会集中在输入上。

更新后的CSS代码为：

const styles = theme => ({
  main: {
    "&:focus": {
      color: "cyan"
    },
  },
  underline: {
    "&:after": {
      borderBottom: `2px solid cyan`
    }
  },
});

我使用:hover属性进行了尝试，它确实有效。我不确定为什么属性:focus不起作用??

谁能解释我，我哪里出了错？

Answer 1

使用“：focus”伪类无效，因为标签不是具有焦点的元素。当相应的输入具有焦点时，focused类将应用于InputLabel。

ReactJS materialUI如何在焦点上更改文本区域的颜色

1 个答案: