Reactjs React Material UI TextField FormHelperTextProps样式设置不起作用

我正在尝试设置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 >
    );
}

const useHelperTextStyles=makeStyles（（）=>({
根：{
“&.MuiFormHelperText root:{color:textfieldcolors.error[“status text”]}，
//“&.MuiFormHelperText已包含”
}
})
);
常量EmptyTextField=（道具：CustomEmptyFieldOps）=>{
常数{
用户名或密码，
}=道具；
const inputLabel=“志愿者中心”+用户名或密码；
const errorMessage=“请输入您的志愿者中心”+用户名或密码；
const textFieldStyles=useTextFieldStyles（false）；
const helperTextStyles=useHelperTextStyles（）；
返回(
);
}

首先，类需要以类属性为目标，如

根属性

、

聚焦属性

等。因此，在类属性中，选择将样式传递给

根属性

类。另一个问题是

usehelopertextstyles

hook中没有

helperText

类。
因此，针对根样式，代码如下所示：

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>
    );
};

const useHelperTextStyles=makeStyles（（）=>({
根目录：{
颜色：text字段颜色。错误[“状态文本”]
}
}));
const EmptyTextField=（道具）=>{
const{usernameOrPass}=props；
const inputLabel=“志愿者中心”+用户名或密码；
const errorMessage=“请输入您的志愿者中心”+用户名或密码；
const textFieldStyles=useTextFieldStyles（false）；
const helperTextStyles=useHelperTextStyles（）；
返回(
);
};

下面是一个工作演示：