如何在TypeScript中为MUI DatePicker自定义选中日期样式？

问题根源 #

你的代码中样式不生效的核心原因是：DatePicker的日历弹窗通过Portal挂载到DOM根节点（而非组件内部），直接在DatePicker的sx属性中编写的.MuiPickersDay-root样式无法穿透到弹窗内的日期元素，导致样式无法作用到目标节点。

解决方案（推荐） #

使用MUI官方提供的slotProps针对day插槽直接设置样式，这是最规范且优先级足够的方式，无需依赖!important强制覆盖。

修改后的代码示例 #

<DatePicker
  slotProps={{
    textField: {
      size: isDesktop ? "medium" : "small",
      variant: "standard",
    },
    // 自定义日期项样式
    day: {
      sx: {
        color: "white",
        "&:hover": {
          backgroundColor: "rgba(0, 128, 255, 0.2)",
          color: "blue",
        },
        "&.Mui-selected": {
          backgroundColor: "rgba(0, 128, 255, 0.3)",
          color: "white",
          "&:hover": {
            backgroundColor: "rgba(0, 128, 255, 0.4)",
          },
        },
      },
    },
  }}
  sx={{
    flex: 1,
    fontSize: ".875rem",
    "& input::placeholder": {
      fontSize: ".875rem",
    },
    ".MuiOutlinedInput-root": {
      fontSize: ".875rem",
    },
  }}
  value={startShowDate}
  format="dd/MM/yyyy"
  onChange={(newValue) => startDateHandle(newValue)}
/>

<DatePicker
  slotProps={{
    textField: {
      size: isDesktop ? "medium" : "small",
      variant: "standard",
    },
    day: {
      sx: {
        color: "white",
        "&:hover": {
          backgroundColor: "rgba(0, 128, 255, 0.2)",
          color: "blue",
        },
        "&.Mui-selected": {
          backgroundColor: "rgba(0, 128, 255, 0.3)",
          color: "red",
          "&:hover": {
            backgroundColor: "rgba(0, 128, 255, 0.4)",
          },
        },
      },
    },
  }}
  sx={{
    flex: 1,
    fontSize: ".875rem",
    "& input::placeholder": {
      fontSize: ".875rem",
    },
    ".MuiOutlinedInput-root": {
      fontSize: ".875rem",
    },
  }}
  value={endShowDate}
  format="dd/MM/yyyy"
  onChange={(newValue) => endDateHandle(newValue)}
/>

注意事项 #

1. 移除不必要的!important：通过slotProps设置的样式优先级高于全局默认样式，不需要强制覆盖。
2. Portal渲染机制：MUI日期选择器弹窗默认使用Portal挂载，避免样式污染和层级问题，这也是直接在组件sx中写子元素样式无效的核心原因。

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