在材质 UI 选择上更改颜色不起作用，ReactJS

Question

我有以下代码:

const useStyles = makeStyles({
select: {
'&:before': {
borderColor: 'white',
},
'&:after': {
borderColor: 'white',
},
'&:not(.Mui-disabled):hover::before': {
borderColor: 'white',
},
},
icon: {
fill: 'white',
},
root: {
color: 'white',
},
})
const classes = useStyles();
return (
<Box sx={ { width: '20%', height: '21%', position: 'relative', bottom: '15px', borderRadius: '10px', padding: '2px', color: 'white', outline: 'white' }}>

<FormControl fullWidth  >
<InputLabel id="demo-simple-select-label" style={{color: 'white', borderColor: 'white'}}>Cidade</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={regiao}
label="Região"
onChange={e => (handleChange(e))}
inputProps={{
classes: {
icon: classes.icon,
root: classes.root,
},
}}
>
<MenuItem value={10}>Sao Paulo</MenuItem>
</Select>
</FormControl>
</Box>

但是它不起作用。当我转到select的地方时，我的react应用会闪烁。如何更改ui的颜色选择?

Answer 1

为组件添加样式，如:

sx={{
'& .MuiTabs-indicator': {
borderColor:'white'
},
'& .MuiTab-root.Mui-selected': {
borderColor:'white'
}
}}