如何访问Material UI <DatePicker/>中年份选择器的sx属性？

要修改年份选择器里选中年份的蓝色背景，你需要针对年份选择器对应的插槽或CSS类进行样式覆盖，以下是两种可行方案：

方案一：通过slotProps的yearPicker插槽配置 #

直接在slotProps中添加yearPicker字段，通过其sx属性精准控制选中年份的样式：

<DatePicker
  defaultValue={dayjs().subtract(1, "month")}
  label="Tarih Başlangıcı"
  onChange={(e: dayjs.Dayjs | null) =>
    setDateStart(e?.format("DD.MM.YYYY"))
  }
  slotProps={{           
    day: {
      sx: {
        "&.MuiPickersDay-dayWithMargin.Mui-selected": {
          bgcolor: "var(--c1)",
        },                
      },
    },
    // 添加年份选择器的slot配置
    yearPicker: {
      sx: {
        "& .MuiPickersYear-year.Mui-selected": {
          bgcolor: "var(--c1)", // 替换成你需要的颜色
          color: "#fff", // 可选：修改选中年份的文字颜色
          '&:hover': {
            bgcolor: "var(--c1-light)", // 可选：hover状态颜色
          }
        }
      }
    }
  }}
  sx={{
    ".MuiInputBase-root": {
      borderRadius: 25,
    },
    ".MuiButtonBase-root": {
      color: "var(--c1)",
    },
    ".Mui-focused": {
      ".MuiOutlinedInput-notchedOutline": { borderColor: "var(--c1)" },
      "&.MuiInputLabel-formControl": { color: "var(--c1)" },
    },
  }}
/>

方案二：直接在DatePicker的sx中全局覆盖年份选择器样式 #

如果不想单独配置插槽，也可以在DatePicker的sx属性里直接通过CSS选择器定位年份选择器的选中状态：

<DatePicker
  defaultValue={dayjs().subtract(1, "month")}
  label="Tarih Başlangıcı"
  onChange={(e: dayjs.Dayjs | null) =>
    setDateStart(e?.format("DD.MM.YYYY"))
  }
  slotProps={{           
    day: {
      sx: {
        "&.MuiPickersDay-dayWithMargin.Mui-selected": {
          bgcolor: "var(--c1)",
        },                
      },
    },
  }}
  sx={{
    ".MuiInputBase-root": {
      borderRadius: 25,
    },
    ".MuiButtonBase-root": {
      color: "var(--c1)",
    },
    ".Mui-focused": {
      ".MuiOutlinedInput-notchedOutline": { borderColor: "var(--c1)" },
      "&.MuiInputLabel-formControl": { color: "var(--c1)" },
    },
    // 添加年份选择器选中样式
    "& .MuiYearPicker-root .MuiPickersYear-year.Mui-selected": {
      bgcolor: "var(--c1)",
      color: "#fff"
    }
  }}
/>

说明 #

• 选中年份对应的核心类是MuiPickersYear-year.Mui-selected，精准定位这个组合类就能覆盖默认的蓝色背景。
• 两种方案都能实现需求，推荐第一种（slotProps），它更符合Material UI的组件插槽设计，样式隔离性更好。

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