如何解决React Material UI TextField FormHelperTextProps 样式不起作用
我正在尝试为 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 >
);
}
解决方法
首先一个类需要在 classes 属性中定位,比如 root
、focused
等,所以在 classes 属性中选择将样式传递给 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>
);
};
这是一个工作演示:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。