如何在 Material UI 中更改 Select 的文本、图标和下划线颜色

Posted 2023-02-22

【中文标题】如何在 Material UI 中更改 Select 的文本、图标和下划线颜色

【英文标题】：How to change text, icon and underline color of Select in Material UI

【发布时间】：2019-07-28 01:58:42

【问题描述】：

所以我想把Material UI Select组件的text、icon和underline颜色从黑色改成白色，看起来像这样：

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", backgroundColor: "blue" , selectRoot: color: "white" ); ... <Select classes= root: classes.selectRoot, icon: classes.selectRoot />https://codesandbox.io/s/x3j9lz9z2o

【参考方案1】：

通过覆盖 root 和 icon 类找到了一种方法：

const styles = theme => (
  root: 
    background: "blue",
  ,
  whiteColor: 
    color: "white"
  
);

 ... 

<Select
  classes=
    root: classes.whiteColor,
    icon: classes.whiteColor
   
/> 

https://codesandbox.io/s/x3j9lz9z2o

唯一需要改变的是下划线颜色。