React Material UI TextField FormHelperTextProps 样式不起作用

Question

我正在尝试设置 Material UI 提供的 TextField 组件附带的帮助文本的样式（可在 here 找到）。我正在使用 FormHelperTextProps（可在here找到）。然而，由于某种原因，我正在编写的样式似乎没有应用于组件本身。如果我能在这方面得到任何帮助，我将不胜感激。这是我的代码：

    const useHelperTextStyles = makeStyles(()=> ({
    root: { 
        "& .MuiFormHelperText-root" : { color: TextFieldColours.error["status-text"] }, 
        // "& .MuiFormHelperText-contained"
    }
    })
     );

    const EmptyTextField = (props: CustomEmptyFieldProps) => {
    const {
         usernameOrPass,
    } = props; 
    const inputLabel = "VolunteerHub " + usernameOrPass; 
    const errorMessage = "Please enter your VolunteerHub " + usernameOrPass; 

    const textFieldStyles = useTextFieldStyles(false);
    const helperTextStyles = useHelperTextStyles(); 
    return (
        <div>
            <TextField
                className={textFieldStyles.root}
                placeholder={inputLabel}
                id="outlined-error-helper-text"
                defaultValue=""
                helperText={errorMessage}
                variant="outlined"
                FormHelperTextProps={{
                    classes={helperTextStyles.helperText,}
                }}
            />
        </div >
    );
}

Answer 1

首先，类需要在classes prop中定位，例如

root

，

focused

等，因此在classes props中选择将样式传递给

root

类。另一个问题是

helperText

钩子中没有

useHelperTextStyles

类。
因此，为了定位根样式，代码将如下所示：

const useHelperTextStyles = makeStyles(() => ({
    root: {
        color: TextFieldColours.error["status-text"]
    }
}));

const EmptyTextField = (props) => {
    const { usernameOrPass } = props;
    const inputLabel = "VolunteerHub " + usernameOrPass;
    const errorMessage = "Please enter your VolunteerHub " + usernameOrPass;

    const textFieldStyles = useTextFieldStyles(false);
    const helperTextStyles = useHelperTextStyles();
    return (
        <div>
            <TextField
                className={textFieldStyles.root}
                placeholder={inputLabel}
                id="outlined-error-helper-text"
                defaultValue=""
                helperText={errorMessage}
                variant="outlined"
                FormHelperTextProps={{
                        classes:{
                            root:helperTextStyles.root
                        }
                }}
            />
        </div>
    );
};

这是一个工作演示：

Answer 2

在 MUI v5 中，您可以在主题中使用

MuiFormHelperText

组件：

const theme = createTheme({
  components: {
    ...
      MuiFormHelperText: {
        styleOverrides: {
          root: {
            color: colors.error.main
            }
          }
        }
     ...
  }
})

使用 API 文档：https://mui.com/material-ui/api/form-helper-text/