如何更改下拉图标(箭头)在材料界面选择中的位置

Question

我使用的是材料ui选择，我想把下拉图标(箭头(放在左边(文本之前(。如何做到这一点？

此外，如果你知道如何禁用箭头上的效果，将不胜感激。

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是一个帮助社区。所以，首先，试着自己做事，然后在遇到困难时寻求帮助，而不是直接寻求帮助。经历一次。

Answer 2

我通过使用direction: rtl;设置页面的方向来解决这个问题