React Material UI TextField FormHelperTextProps 样式不起作用

Question

我正在尝试设置 Material UI（发现 here). I'm using FormHelperTextProps (found here）提供的 TextField 组件附带的帮助文本的样式。但是，由于某种原因，我正在编写的样式似乎并未应用于组件本身。我将不胜感激我能得到的任何帮助。这是我的代码：

    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

首先 class 需要在 classes 道具中定位，例如 root、focused 等，因此在 classes 道具中 select 将样式传递给 root class。另一个问题是 useHelperTextStyles 钩子中没有 helperText class。
因此，为了定位根样式，代码将如下所示：

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

这是一个工作演示：

React Material UI TextField FormHelperTextProps 样式不起作用

React Material UI TextField FormHelperTextProps Styling Not Working

reactjs

material-ui

uitextfield

styling