下面是展示如何改变ArrowDropDownIcon的颜色的各种方式（一个例子Select，NativeSelect，TextField创造了材料的UI一个选择的）。对于Select和NativeSelect，它利用iconCSS类（https://material-
ui.com/api/select/#css，https://material-ui.com/api/native-
select/#css）。因为TextField它利用了相同iconCSS类的全局类名作为TextField根（& .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);