在 TimePicker 中禁用时如何更改高度、使宽度响应并更改 fontColor 文本字段 - MUI React

Question

我正在尝试更改 TimePicker 组件中的一些属性以适合我的应用程序。我试图使宽度响应，使高度继承与选择组件相同的高度，并在禁用时使 fontColor 与选择组件的颜色相同（如果它有值或 defaultValue），但没有成功。有谁知道如何使用 sx 或 slotProps 来实现它？ 这是我当前的代码和沙箱中的当前应用程序：

Codesandbox 链接： 代码沙盒

<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={{
            backgroundColor: "#333335",
            borderRadius: "0.5rem",
            fieldset: { borderRadius: "0.5rem" },
            scale: "0.85",
            font: "white",
            color: "#FFFF",
            textDecoration: "bold",
            input: {
              color: "#FFFF",
              fontSize: "1.4rem",
              "&::-webkit-input-placeholder": {
                WebkitTextFillColor: "#FFF",
                opacity: 0.5
              }
            },
            "& .MuiTimePicker-root": {
              backgroundColor: "#222223"
            },
            "& .MuiTimePicker-input": {
              color: "#FFFF",
              fontSize: "1.2rem"
            },
            "& .MuiSvgIcon-root": {
              color: "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"
                },
                "& .MuiInputBase-input.Mui-disabled": {
                  fontSize: "1.4rem",
                  WebkitTextFillColor: "white",
                  "&::-webkit-input-placeholder": {
                    opacity: 1
                  }
                }
              }
            }
          }}
        />

Answer 1

以下内容应该适合您

1. 使宽度响应式： 要使

   TimePicker

   的宽度响应式，您只需从

   scale: "0.85"

   属性中删除固定宽度 (

   sx

   )即可。

2. 从选择组件继承高度： 要从

   Select

   组件继承高度，您可以定义具有所需样式的类并将其应用到

   TimePicker

   组件。

3. 禁用时调整字体颜色：要在

   TimePicker

   禁用时调整字体颜色，您可以根据其状态有条件地更改颜色。

这是包含这些更改的更新代码：

<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={{
    backgroundColor: "#333335",
    borderRadius: "0.5rem",
    fieldset: { borderRadius: "0.5rem" },
    color: disabled && (field.value || field.defaultValue) ? "#FF0000" : "#FFFF",
    input: {
      color: disabled ? "#FF0000" : "#FFFF",
      fontSize: "1.4rem",
      "&::-webkit-input-placeholder": {
        WebkitTextFillColor: disabled ? "#FF0000" : "#FFF",
        opacity: 0.5
      }
    },
    "& .MuiTimePicker-root": {
      backgroundColor: "#222223"
    },
    "& .MuiTimePicker-input": {
      color: disabled ? "#FF0000" : "#FFFF",
      fontSize: "1.2rem"
    },
    "& .MuiSvgIcon-root": {
      color: "white"
    }
  }}
  className={disabled ? "custom-disabled" : ""}
  slotProps={{
    popper: {
      sx: {
        "& .MuiList-root": {
          backgroundColor: "#333335"
        },
        "& .MuiMenuItem-root": {
          "&.Mui-selected": {
            backgroundColor: "#04395E",
            color: "white"
          },
          color: "white"
        },
        // ...other styles...
      }
    }
  }}
/>

在你的 CSS 或样式中：

.custom-disabled {
  height: inherit; /* Inherit height from Select component */
}

此代码片段应帮助您实现应用程序中

TimePicker

组件所需的自定义。请务必根据您的设计要求调整样式和颜色。