由于某种原因，错误文本颜色在以下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

这个问题是由CSS的特殊性引起的（基础样式有更特殊的类名，比如MuiFormHelperText-root.Mui-error，而不是覆盖样式类），在这种情况下使用&$语法是recommended：

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

您也可以参考本节中的示例和更多说明。

这将是更好地自定义您的梅主题如下：

const Theme = {
    components: {
        MuiFormHelperText: {
            styleOverrides: {
                root: {
                    color: "red"
                }
            }
        }
    }
};

有关详细信息，请参见https://mui.com/material-ui/customization/theming/。

我发现一个解决方案来改变文本字段的颜色.

<TextField
      error
      id="filled-error-helper-text"
      label="Error"
      defaultValue="Hello World"
      helperText="Incorrect entry."
      variant="filled"

/〉这里你可以看到error是布尔值，所以你可能会有像YUP这样的验证，如果你这样做了，你就像这样传递它。

<TextField
  error={!valid}
  id="filled-error-helper-text"
  label="Error"
  defaultValue="Hello World"
  helperText="Incorrect entry."
  variant="filled" />

在这里，我改变基于有效关键字颜色。