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 >
);
}
解决方案
首先,一个类需要在类道具中定位,比如root
,focused
等等。所以在类道具中选择将样式传递给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>
);
};
这是一个工作演示:
推荐阅读
- git - 如何将“origin/master”添加到本地仓库(可能还有远程仓库),尽管我已经可以推送到远程
- html - 所选选项中的平均答案(按字母值)
- python - 用 numpy 数组/pandas 数据框中最接近的记录替换每条记录
- rust - Rust 宏:单元类型?
- snowflake-cloud-data-platform - 角色创建问题
- mysql - 无状态 bean 内 JPQL 数据中的错误
- asp.net - Asp.Net Core Angular SPA 本地化
- android-studio - Kotlin:在片段中调用 List 和 Grid recycleView
- arduino - 液晶屏显示随机字符
- javascript - 如何使用 CSS 和 Javascript 在我的菜单导航栏中添加动画