如何更改 material-ui select 中下拉图标（箭头）的位置？

Question

我正在使用 material-ui select 并且我想将下拉图标（箭头）放在左侧（文本之前）。如何实现？

此外，如果您知道如何禁用箭头效果，我们将不胜感激。

Answer 1

要实现此目的，您需要针对相关元素的 @material-ui 中的某些内部预定义类。

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>
  );
}

这是工作沙箱 link:- https://codesandbox.io/s/naughty-voice-euprs

注意：- Whosebug 是一个帮助社区。所以，首先，尝试自己做事，然后在遇到困难时寻求帮助，而不是直接寻求帮助。通过 this 一次。

如何更改 material-ui select 中下拉图标（箭头）的位置？

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

reactjs

material-ui

dropdown

html-select