如何使用sx属性覆盖MuiSelect组件的类样式？

方法1：直接为renderValue返回的元素添加样式 #

这是最直接的处理方式，无需依赖组件内置类，直接在renderValue返回的JSX元素上通过sx属性定义样式：

<Select
  renderValue={(selected) => (
    <span sx={{ color: 'red', fontSize: '1.2rem', fontWeight: 'bold' }}>
      {selected}
    </span>
  )}
  // 其他组件属性...
>
  {/* 下拉选项内容 */}
</Select>

方法2：通过sx覆盖Select内部目标类 #

如果要通过组件内置类设置样式，需要针对MuiSelect-select类（而非你之前尝试的MuiSelect-root）进行覆盖——renderValue返回的内容挂载在这个类对应的容器内：

<Select
  sx={{
    '& .MuiSelect-select': {
      color: 'blue',
      fontStyle: 'italic',
      // 其他样式规则
    }
  }}
  renderValue={(selected) => selected}
  // 其他组件属性...
>
  {/* 下拉选项内容 */}
</Select>

方法3：使用styled创建自定义Select组件 #

如果需要在多处复用该样式，可以用Material-UI的styled工具封装自定义Select组件：

import { styled } from '@mui/material/styles';
import Select from '@mui/material/Select';

const StyledSelect = styled(Select)`
  .MuiSelect-select {
    color: green;
    font-size: 1rem;
  }
`;

// 调用自定义组件
<StyledSelect
  renderValue={(selected) => selected}
  // 其他组件属性...
>
  {/* 下拉选项内容 */}
</StyledSelect>

你之前覆盖MuiSelect-root无效，是因为这个类对应Select的最外层容器，而renderValue的文本内容实际在内部的MuiSelect-select容器中，所以需要针对这个内部类设置样式。

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