如何在错误和焦点上更改Material-UI TextField底部和标签颜色 [英] How to change Material-UI TextField bottom and label color on error and on focus
问题描述
我有一个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
复制: https://codesandbox.io/s/q9yj0y74z6
推荐答案
如注释中所述,您需要覆盖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}
/>
https://codesandbox.io/s/9z70kz5vnr
这篇关于如何在错误和焦点上更改Material-UI TextField底部和标签颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!