MUI select - 所選值未以大寫字母顯示

Question

我有一個帶有 menuItems 下拉列表的 mui select。 我用大寫字母創建了值，但是在選擇值時，結果不顯示大寫。

我怎樣才能改變它？

    <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"
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value="Pending">Pending</MenuItem>
        <MenuItem value="Active">Active</MenuItem>
        <MenuItem value="Inactive">Inactive</MenuItem>
      </Select>
    </FormControl>

這是我的下拉列表 - 值大寫，然后在 web 上顯示如下

Answer 1

你可以這樣試試
sx={{ textTransform: "uppercase" }}