Material-ui

Question

我有一个 form 背景颜色很尴尬。想要在 Outlined TextField 处于错误状态但似乎无法覆盖它时更改帮助文本的颜色。它坚持红色。

Answer 1

由于某种原因，在以下类名下生成了错误文本颜色：.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 特殊性引起的（基本样式具有比覆盖样式 class 更具体的 class 名称，即 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 的示例和更多解释。

Material-ui - TextField - 无法更改助手文本错误颜色

Material-ui - TextField - Can't change helper text error color

reactjs

jss