如何修改Material UI TimePicker禁用时字体颜色及hover输入框边框色

需求说明 #

我正在尝试修改Material UI（MUI）TimePicker组件的样式，需要实现两个需求：

• 修改组件禁用状态下的字体颜色
• 移除输入框hover时的默认边框颜色

解决方案代码 #

<TimePicker
  {...field}
  ampm={false}
  disabled={disabled}
  views={["hours", "minutes", "seconds"]}
  value={selectedTime}
  onChange={(newTime: any) => {
    setSelectedTime(dayjs(newTime));
    field.onChange(newTime);
  }}
  timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
  sx={{
    width: "100%",
    backgroundColor: "#ccc",
    borderRadius: "0.45rem",
    // 方式1：精准定位hover状态的边框元素
    "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
      borderColor: "transparent"
    },
    fieldset: {
      borderRadius: "0.45rem",
      // 方式2：直接在fieldset上设置hover状态（二选一即可）
      // "&:hover": {
      //   borderColor: "transparent"
      // }
    },
    input: {
      color: "white",
      fontSize: "1.4rem",
      // 设置禁用状态下的字体颜色
      "&.Mui-disabled": {
        color: "#777"
      },
      "&::-webkit-input-placeholder": {
        WebkitTextFillColor: "#FFF",
        opacity: 1
      }
    },
    "& .MuiSvgIcon-root": {
      color: disabled ? "#777" : "white"
    }
  }}
  slotProps={{
    popper: {
      sx: {
        "& .MuiList-root": {
          backgroundColor: "#333335"
        },
        "& .MuiMenuItem-root": {
          "&.Mui-selected": {
            backgroundColor: "#04395E",
            color: "white"
          },
          color: "white"
        },
        "& .MuiDialogActions-root": {
          backgroundColor: "#333335"
        },
        "& .MuiSvgIcon-root": {
          color: "white",
          "&.MuiSvgIcon-fontSizeMedium": {
            backgroundColor: "#04395E",
            color: "white"
          }
        },
        "& .MuiDialogActions-root .MuiButton-text": {
          color: "white"
        }
      }
    }
  }}
/>

关键改动说明 #

• 禁用状态字体颜色：在input的sx样式中添加&.Mui-disabled选择器，直接指定禁用时的字体颜色，覆盖MUI默认的灰色禁用样式。
• 移除hover边框：两种实现方式任选其一：
  1. 精准定位MUI的hover边框元素.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline，将borderColor设为transparent让边框消失；
  2. 直接在fieldset的:hover状态设置borderColor: "transparent"，简化选择器写法。

若希望hover时边框与背景融合，也可将borderColor设为组件背景色#ccc，达到视觉上移除边框的效果。

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