更改材質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>

但它不起作用。 當我去選擇那里時，我的反應應用程序會閃爍。 如何從 MUI 更改顏色選擇？

Answer 1

為您的組件添加樣式，例如：

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