React Material UI TextField FormHelperTextProps Styling Not Working

user_13274055 0
Viewed 7779

I'm trying to style the helper text that comes with the TextField Component given by Material UI ( found here). I'm using FormHelperTextProps (found here). However, it seems that, for some reason, the styling I'm writing is not being applied to the component itself. I would appreciate any help I could get on this. Here is my code:

    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 >
    );
}
material-ui reactjs styling uitextfield
1 Answers

first of all a class needs to targetted in classes prop, like root, focused etc. so in classes props select pass the style to the root class. And another issue is there is no helperText class in useHelperTextStyles hook.
So for targeting the root style the code will like this:

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

Here is a working demo:

Edit quizzical-bash-ggynj

user_112222820
Related