How to change color icon of Nativeselect Material UI?

Question

I have a NativeSelect

<NativeSelect
  input={<BootstrapInput/>}
  onChange={this.handleClick}
>
  <option value="1">1</option>
<NativeSelect>

How can i change the color of button dropdown?

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 (
    <>
      <MySelect value="1">
        <MenuItem value="1">Select</MenuItem>
      </MySelect>
      <br />
      <MySelect native value="1">
        <option value="1">Select native</option>
      </MySelect>
      <br />
      <MyNativeSelect value="1">
        <option value="1">NativeSelect</option>
      </MyNativeSelect>
      <br />
      <MyTextField select value="1">
        <MenuItem value="1">TextField select</MenuItem>
      </MyTextField>
      <br />
      <MyTextField select SelectProps={{ native: true }} value="1">
        <option value="1">TextField select native</option>
      </MyTextField>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);