如何在material-ui select组件中改变下拉菜单图标（箭头）的位置？

Question

我正在使用Material-UI Select组件，想将下拉箭头图标放在左侧（在文字之前）。如何实现？

另外，如果您知道如何禁用箭头的效果，将不胜感激。

- NicoSan

---

如果你在这里放置一些代码，我们可以提供更多帮助 :) - Yoel

@Yoel：你可以在这里找到一些示例sandbox。 - NicoSan

不是...我猜@Yoel的意思是你尝试去实现这个。我在我的一个项目中做过类似的事情，让我检查一下。 - Rajiv

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

以下是有效的沙盒链接：https://codesandbox.io/s/naughty-voice-euprs

注意：Stackoverflow是一个帮助社区，因此请先尝试自行解决问题，当遇到难题时再寻求帮助，而不是直接寻求帮助。请阅读这个。

- Rajiv

---

非常感谢您的帮助。那正是我所需要的。与您想的相反，我尝试过做这个，但是我没有成功:( 这就是为什么我来到这里的原因。 - NicoSan

抱歉..对不起 :)..我想，如果您在这里也发布了您的代码，就可以避免这种误解了... - Rajiv

等一下，在选择选项后出现了一些问题。让我来纠正一下。 - Rajiv

据我所见，您对material-ui和reactjs有很好的理解。不知道您是否可以看一下我的问题65370281？我感到绝望:( 非常感谢您提前的帮助... - NicoSan

Answer 2

我通过设置页面方向为direction: rtl;解决了这个问题。

- Hillel