ReactJS中修改Material UI Select颜色不生效如何解决

你的代码自定义样式失效、页面闪烁是三个问题导致的：

• 定义的select边框样式类根本没绑定到Select组件上，写的边框规则完全没被应用
• 样式传参位置错误：inputProps是传给底层原生input元素的属性，把Select根节点、下拉箭头的样式类塞到这里，不仅不会生效，还会触发组件非必要重渲染导致闪烁
• 样式优先级不足，就算类绑定正确，MUI默认样式的选择器权重高于你写的普通类选择器，自定义颜色会被默认样式覆盖

MUI v5（当前主流版本） #

直接用官方推荐的sx属性定制样式即可，不要混用makeStyles、内联style多种样式方案，从根源避免优先级冲突和重渲染闪烁，完整可运行代码如下：

import { Box, FormControl, InputLabel, Select, MenuItem } from '@mui/material';

// 组件渲染部分
return (
  <Box sx={{ 
    width: '20%', 
    height: '21%', 
    position: 'relative', 
    bottom: '15px', 
    borderRadius: '10px', 
    padding: '2px' 
  }}>
    <FormControl fullWidth>
      <InputLabel 
        id="demo-simple-select-label"
        sx={{
          color: 'white',
          '&.Mui-focused': {
            color: 'white'
          }
        }}
      >
        Cidade
      </InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={regiao}
        label="Região"
        onChange={handleChange}
        sx={{
          // 选中项文字颜色
          color: 'white',
          // 下拉箭头颜色
          '& .MuiSvgIcon-root': {
            fill: 'white',
          },
          // 默认态下划线
          '&:before': {
            borderColor: 'white !important',
          },
          // 聚焦态下划线
          '&:after': {
            borderColor: 'white !important',
          },
          // 悬浮态下划线
          '&:not(.Mui-disabled):hover::before': {
            borderColor: 'white !important',
          }
        }}
      >
        <MenuItem value={10}>Sao Paulo</MenuItem>
      </Select>
    </FormControl>
  </Box>
)

如果需要同步修改下拉弹出菜单的背景色、选项文字颜色，给Select增加MenuProps配置即可：

<Select
  // 省略其他已有属性
  MenuProps={{
    sx: {
      '& .MuiPaper-root': {
        backgroundColor: '#2d2d2d', // 下拉菜单自定义背景色
        color: 'white', // 下拉选项文字颜色
      }
    }
  }}
>

MUI v4 旧版本 #

如果你还在使用v4版本，不需要换样式方案，只要修正类的绑定位置即可，不要通过inputProps传自定义类，直接挂在Select的classes属性上：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={regiao}
  label="Região"
  onChange={handleChange}
  classes={{
    root: classes.root,
    icon: classes.icon,
    select: classes.select // 之前漏绑定的边框样式类要加上
  }}
>
  <MenuItem value={10}>Sao Paulo</MenuItem>
</Select>

• 不要在同一个组件上混用内联style、makeStyles、sx三种样式写法，非常容易出现样式优先级错乱、非必要重渲染导致的闪烁问题
• MUI组件的内部元素类名可以直接通过浏览器开发者工具选中元素查看，不要靠猜测传参
• 原代码里onChange={e => (handleChange(e))属于无意义的函数包裹，直接传onChange={handleChange}即可，能减少不必要的重渲染

内容的提问来源于stack exchange，提问作者carlos sodre