React Material UI TextField FormHelperTextProps 样式不起作用
React Material UI TextField FormHelperTextProps Styling Not Working
我正在尝试设置 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 >
);
}
首先 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>
);
};
这是一个工作演示:
我正在尝试设置 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 >
);
}
首先 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>
);
};
这是一个工作演示: