我正在尝试更改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'
}
}
}
}
});
如何更改标签的颜色?在这张照片中,我希望“注释”与下划线的颜色匹配
答案 0 :(得分:1)
蒂姆! 这是应该会帮助您的代码段。
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>
答案 1 :(得分:0)
没有覆盖的另一种方法是:
const textStyles = makeStyles({
root: {
"& .Mui-focused": {
color: "tomato",
fontWeight: "bold"
},
});
class Index extends React.Component {
const TextClass = textStyles()
render() {
return (
<MuiThemeProvider theme={theme}>
<div>
<CssBaseline />
<TextField className={textStyles.root} label="Text field" InputLabelProps={{shrink:true}} />
</div>
</MuiThemeProvider>
);
}
}