Material UI v5使用sx prop设置Select颜色后下拉箭头仍为黑色如何解决

原因 #

MUI的Select下拉箭头是内部独立渲染的SvgIcon组件，你设置的color:"#ffffff"只作用于Select的文本内容，不会覆盖箭头的默认颜色配置。

解决方案 #

直接在现有sx属性中通过子元素选择器指定箭头样式即可，修改后的代码如下：

<Select
  id="dropdown"
  value={dropdownValue}
  onChange={handleChange}
  disableUnderline
  variant="standard"
  sx={{ 
    color:"#ffffff",
    // 匹配下拉箭头元素修改颜色
    '& .MuiSelect-icon': {
      color: "#ffffff"
    }
  }}
>
  <MenuItem value="DROPDOWN">DROPDOWN</MenuItem>
  <MenuItem value="Value2">Value 2</MenuItem>
</Select>

如果你使用的是v5及以上版本的MUI，也可以用更简洁的iconSx属性实现：

<Select
  id="dropdown"
  value={dropdownValue}
  onChange={handleChange}
  disableUnderline
  variant="standard"
  sx={{ color:"#ffffff" }}
  iconSx={{ color: "#ffffff" }}
>
  <MenuItem value="DROPDOWN">DROPDOWN</MenuItem>
  <MenuItem value="Value2">Value 2</MenuItem>
</Select>

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