如何修改MUI TextField（select类型）下拉选中后的文本颜色？

我使用Material-UI（MUI）的TextField组件（select类型），代码如下：

<TextField
  required
  id="outlined-select-currency"
  select
  label="Client Type"
  value={currency}
  onChange={handleChange}
  sx={{ '& input' : {color: 'white'}, '& label.Mui-focused': { color: 'white' }, '& label' : {color: 'white'} }}
>
  {currencies.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

初始显示效果：

• 输入框文本、未聚焦/聚焦状态的标签均为白色，显示正常
• 下拉展开后选项显示正常

但点击下拉选择选项后，输入框内的选中文本颜色未变为白色（仍为深色）。查看元素类信息，发现选中状态下的文本受特定类样式影响。

请问需要覆盖哪个CSS类来修改下拉选中后的文本颜色？

解决方案 #

需要覆盖MuiSelect-select类（包含其聚焦状态），在sx属性中添加对应样式规则即可，修改后的代码如下：

<TextField
  required
  id="outlined-select-currency"
  select
  label="Client Type"
  value={currency}
  onChange={handleChange}
  sx={{ 
    '& input': { color: 'white' }, 
    '& label.Mui-focused': { color: 'white' }, 
    '& label': { color: 'white' },
    // 覆盖选中后的文本颜色
    '& .MuiSelect-select': { color: 'white' },
    // 可选：处理聚焦状态下的选中文本颜色
    '& .MuiSelect-select:focus': { color: 'white' }
  }}
>
  {currencies.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

原理：选择选项后，TextField内部的Select组件会把选中值渲染到带有MuiSelect-select类的元素中，该元素的样式优先级高于之前设置的input样式，因此需要直接覆盖这个类的颜色属性。

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