How to change color icon of Nativeselect Material UI?

Question

I have a NativeSelect

}
  onChange={this.handleClick}
>
  1
<         


        

Answer 1

Below is an example showing how to change the color of the ArrowDropDownIcon for the various ways (Select, NativeSelect, TextField) of creating a select in Material-UI. For Select and NativeSelect, it leverages the icon CSS class (https://material-ui.com/api/select/#css, https://material-ui.com/api/native-select/#css). For TextField it leverages the global class name of that same icon CSS class as a descendant of the TextField root (& .MuiSelect-icon).

import React from "react";
import ReactDOM from "react-dom";
import Select from "@material-ui/core/Select";
import NativeSelect from "@material-ui/core/NativeSelect";
import MenuItem from "@material-ui/core/MenuItem";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const MySelect = withStyles({
  root: {
    width: 200
  },
  icon: {
    color: "red"
  }
})(Select);
const MyNativeSelect = withStyles({
  root: {
    width: 200
  },
  icon: {
    color: "purple"
  }
})(NativeSelect);
const MyTextField = withStyles({
  root: {
    "& .MuiSelect-root": {
      width: 200
    },
    "& .MuiSelect-icon": {
      color: "blue"
    }
  }
})(TextField);
function App() {
  return (
    <>
      
        Select
      
      

      
        Select native
      
      

      
        NativeSelect
      
      

      
        TextField select
      
      

      
        TextField select native
      
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);