更改材质ui选择的颜色不起作用，ReactJS答案

【问题标题】：change color on material ui select doesn't work, ReactJS更改材质ui选择的颜色不起作用，ReactJS
【发布时间】：2022-06-14 23:01:01
【问题描述】：

我有以下代码：

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 中的颜色选择？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

为您的组件添加样式，例如：

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

【讨论】：