MUI Select组件选中值大写不显示，如何解决？

方案一：通过样式强制保留文本格式 #

MUI的Select组件默认可能对选中文本应用文本转换样式（如capitalize），导致原有的大写格式被修改。直接给Select添加样式禁用文本转换即可：

修改Select组件，新增sx属性设置textTransform: 'none'：

<FormControl size="small" sx={{ m: 1, minWidth: 150 }}>
  <FormHelperText className="text-black">Filter By: </FormHelperText>
  <Select
    className="border border-black text-black bg-white"
    value={filterBy}
    onChange={handleChangeFilter}
    displayEmpty
    inputProps={{ 'aria-label': 'Filter By: ' }}
    variant="outlined"
    sx={{ textTransform: 'none' }} // 添加此行禁用文本转换
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value="Pending">Pending</MenuItem>
    <MenuItem value="Active">Active</MenuItem>
    <MenuItem value="Inactive">Inactive</MenuItem>
  </Select>
</FormControl>

方案二：自定义选中值的渲染逻辑 #

如果样式方法未生效，可通过Select的renderValue属性手动控制选中内容的显示，确保文本保持原有的大写格式：

<FormControl size="small" sx={{ m: 1, minWidth: 150 }}>
  <FormHelperText className="text-black">Filter By: </FormHelperText>
  <Select
    className="border border-black text-black bg-white"
    value={filterBy}
    onChange={handleChangeFilter}
    displayEmpty
    inputProps={{ 'aria-label': 'Filter By: ' }}
    variant="outlined"
    renderValue={(selected) => {
      // 空值显示None，其他情况直接返回原选中值
      return selected ? selected : <em>None</em>;
    }}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value="Pending">Pending</MenuItem>
    <MenuItem value="Active">Active</MenuItem>
    <MenuItem value="Inactive">Inactive</MenuItem>
  </Select>
</FormControl>

方案三：排查全局样式冲突 #

若前两种方法无效，检查是否存在全局CSS规则（如自定义的.text-black类或全局文本样式）覆盖了Select的文本格式。比如全局设置了text-transform: lowercase，这种情况需要调整全局样式的优先级，或给Select内部的文本元素添加更具体的样式规则。

内容的提问来源于stack exchange，提问作者Jennifer De Goede