Material-ui-TextField-无法更改辅助文字错误颜色

Question

我有一个form，背景颜色很尴尬。当其处于错误状态但似乎无法覆盖它时，想更改大纲TextField的帮助文本的颜色。它会持续显示红色。

请参见CodeSandBox。

Answer 1

由于某种原因，错误文本颜色是在以下className下生成的：.MuiFormHelperText-root.Mui-error
因此，仅覆盖错误规则是不够的。
这将达到目的：

const helperTextStyles = makeStyles(theme => ({
  root: {
    margin: 4,
    color:'black',
  },
  error: {
    "&.MuiFormHelperText-root.Mui-error" :{
      color: theme.palette.common.white,
    },
  },
}));

Code Sandbox

Answer 2

问题是由CSS特定性引起的（基本样式具有比覆盖样式类更具体的类名，即MuiFormHelperText-root.Mui-error）。在这种情况下，recommended使用&$语法：

const helperTextStyles = makeStyles(theme => ({
  root: {
    margin: 4,
    '&$error': {
      color: 'white'
    }
  },
  error: {} //<--this is required to make it work
}));

您也可以参考this section作为示例和更多说明。