如何在错误和焦点上更改Material-UI TextField底部和标签颜色
我有一个Material UI TextField
组件,该组件需要对以下颜色进行自定义:
I have a Material UI TextField
component that needs some color customization for :
-
error
-
focused
error
focused
我正在使用 @ material-ui/core 3.8.1
它是 <TextField />
组件.
I am using @material-ui/core 3.8.1
and it's <TextField />
component.
我想避免不得不使用<MuiThemeProvider>
这是我根据此处针对Material-UI <Input />
的建议进行尝试的方式a>组件和答案此处
This is how I have tried based on the recommendation here for the Material-UI <Input />
component and the answer here
如注释中所述,您需要覆盖classes属性.
As already stated in the comments, you need to override the classes property.
&$
语法引用同一样式表中的类.
您的示例已经差不多了,但是您需要传递一个错误类.
The &$
syntax refers to a class in the same stylesheet.
You are nearly there with your example but you need to pass in an error class.
const styles = muiTheme => ({
label: {
"&$focusedLabel": {
color: "cyan"
},
"&$erroredLabel": {
color: "orange"
}
},
focusedLabel: {},
erroredLabel: {},
underline: {
"&$error:after": {
borderBottomColor: "orange"
},
"&:after": {
borderBottom: `2px solid cyan`
}
},
error: {}
});
<TextFieldMui
InputLabelProps={{
classes: {
root: classes.label,
focused: classes.focusedLabel,
error: classes.erroredLabel
},
}}
InputProps={{
classes: {
root: classes.underline,
error: classes.error
}
}}
{...props}
/>