How do I change the position of dropdown icon (arrow) in material-ui select?

Question

I'm using material-ui select and I want to put the dropdown icon (arrow) at left (before text). How to achieve this ?

Also, if you know how to disable the effect on the arrow, would be appreciated.

Answer 1

to achieve this you need to target some internal predefined classes of @material-ui of relevant elements.

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
  icon:{
    left:0
  },
  iconOpen:{
    transform:'none'
  },
  formControlLabel:{
    left:24
  },
  selectSelect:{
    paddingLeft:'24px'
  }
}));

export default function App() {
  const classes = useStyles();
  const [age, setAge] = React.useState('');

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

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel classes={{formControl:classes.formControlLabel}} id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
          classes={{icon:classes.icon, iconOpen:classes.iconOpen,select:classes.selectSelect}}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      </div>
  );
}

Here is the working sandbox link:- https://codesandbox.io/s/naughty-voice-euprs

Note:- Stackoverflow is a helping community. So, first, try to do things on your own and then ask for help when got stuck instead of directly asking for help. Go through this once.