React Material UI TextField FormHelperTextProps 样式不起作用

Question

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

    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

首先，类需要在类 prop 中定位，例如等root，focused因此在类 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>
    );
};

这是一个工作演示：