reactjs - MaterialUI - 更改焦点上的颜色文本字段
问题描述
我正在尝试更改 Textfield 中标签文本的颜色,但我似乎无法弄清楚。
这是我正在尝试的:
<TextField
value={value}
key={name}
label={label}
id={id}
name={name}
InputLabelProps={{
shrink: true,
FormLabelClasses: {
'root': {
'&:focused': {
color: 'white'
}
},
focused: 'true'
}
}}
/>
有人可以告诉我我在这里做错了什么吗?
我也尝试过使用,MuiThemeProvider
但似乎也无法弄清楚:
const theme = createMuiTheme({
overrides: {
MuiFormLabel: {
focused: true,
root: {
'&.focused': {
color: 'white'
}
}
}
}
});
如何更改标签的颜色?在这张照片中,我希望“注释”与下划线的颜色相匹配
解决方案
蒂姆!这是应该对您有所帮助的代码段。
const {
TextField,
createMuiTheme,
MuiThemeProvider,
CssBaseline,
} = window['material-ui'];
const theme = createMuiTheme({
overrides: {
MuiFormLabel: {
root: {
"&$focused": {
color: "tomato",
fontWeight: "bold"
}
},
focused: {}
}
}
});
class Index extends React.Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<div>
<CssBaseline />
<TextField label="Text field" InputLabelProps={{shrink:true}} />
</div>
</MuiThemeProvider>
);
}
}
ReactDOM.render(<Index />, document.getElementById('root'));
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<div id="root"></div>
推荐阅读
- c# - 如何使用 linq 返回布尔值
- excel - 在 Excel 中比较不同年份的两周数字
- r - R 中线性、指数和幂曲线的回归建模
- c - 为什么我的文件指针总是 NULL,即使里面有文本?
- c++ - 为什么我的程序说长度函数不在我的标准库中?
- json.net - 将 LocalDate 从版本 1 反序列化到版本 2
- flutter - Dart/Flutter Web 单元测试错误:错误:未找到:'dart:html'
- android - RecycleView 中的项目不会对齐 xamarin.android
- php - 在php中加密sql连接的密码
- c++ - OpenCV 4:“CAP_PROP_POS_FRAMES”未在此范围内声明