更改select下拉菜单- Material-ui中占位符的文本颜色

import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
  placeholder: {
    color: 'red', // 更改占位符文本颜色
  },
}));

const MyComponent = () => {
  const classes = useStyles();
  const [value, setValue] = React.useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <FormControl className={classes.formControl}>
      <InputLabel
        className={classes.placeholder} // 添加自定义样式类名
        id="demo-simple-select-placeholder-label"
      >
        Placeholder Text
      </InputLabel>
      <Select
        labelId="demo-simple-select-placeholder-label"
        id="demo-simple-select-placeholder"
        value={value}
        onChange={handleChange}
        displayEmpty
        className={classes.selectEmpty}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Option 1</MenuItem>
        <MenuItem value={20}>Option 2</MenuItem>
        <MenuItem value={30}>Option 3</MenuItem>
      </Select>
    </FormControl>
  );
};