如何在MUI React中修改禁用状态下TimePicker的字体颜色

要修改禁用状态下TimePicker的文本颜色，需要针对MUI的禁用输入框类进行样式覆盖——默认的disabled样式优先级高于你直接设置的input样式，所以得用精准的选择器来覆盖。

修改后的代码如下：

<TimePicker
  disabled={true}
  ampm={false}
  views={['hours', 'minutes', 'seconds']}
  sx={{
    backgroundColor: "#333335",
    // 覆盖禁用状态下的输入框样式
    '& .MuiInputBase-input.Mui-disabled': {
      color: "#FFFF",
      fontSize: "1.4rem",
      fontWeight: "bold"
    }
  }}
  slotProps={{
    popper: {
      sx: {
        "& .MuiList-root": {
          backgroundColor: "#333335",
        },
        "& .MuiMenuItem-root": {
          "&.Mui-selected": {
            backgroundColor: "#04395E",
            color: "white"
          },
          color: "white"
        },
      },
    },
  }}
  value={selectedTime}
  onChange={(newTime: any) => setSelectedTime(newTime)}
  timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>

说明 #

MUI的TimePicker输入框在禁用状态下会自动添加.Mui-disabled类，这个类的样式优先级高于你直接在input对象里设置的样式。通过& .MuiInputBase-input.Mui-disabled组合选择器，能精准匹配到禁用状态的输入框，从而应用你需要的文本颜色、字体大小等样式。

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