所以我想改变正文 , 图标 和 下划线 Material UI Select 组件的颜色从黑到白,如下图:
MenuItem 实现的选项文本颜色在默认情况下看起来不错,因为它们是白色的灰色:
本人原创documentation of Select没有多大帮助,因为它没有说明我应该在类中覆盖哪个 CSS 类。
import React from "react";
import ReactDOM from "react-dom";
import { withStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
const styles = theme => ({
root: {
background: "blue",
backgroundColor: "blue"
}
});
const OPTIONS = {
A: "Option A",
B: "Option B"
};
class App extends React.Component {
state = {
option: OPTIONS.A
};
handleOptionChange = event => {
return this.setState({ option: event.target.value });
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<FormControl variant="outlined">
<Select
value={this.state.option}
onChange={this.handleOptionChange}
name="optionsDropdown"
>
<MenuItem value={OPTIONS.A}>{OPTIONS.A}</MenuItem>
<MenuItem value={OPTIONS.B}>{OPTIONS.B}</MenuItem>
</Select>
</FormControl>
</div>
);
}
}
const DemoApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<DemoApp />, rootElement);
最佳答案
通过覆盖 找到了一种方法来做到这一点根和 图标 类:
const styles = theme => ({
root: {
background: "blue",
},
whiteColor: {
color: "white"
}
});
...
<Select
classes={{
root: classes.whiteColor,
icon: classes.whiteColor
}}
/>
https://codesandbox.io/s/x3j9lz9z2o
唯一需要改变的是下划线颜色。
关于reactjs - 如何在 Material UI 中更改 Select 的文本、图标和下划线颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55022493/