如何使用MUI X的sx属性修改<DatePicker />选中年份的背景色？

你之前的配置仅针对日期选择面板的单日按钮（对应day slot），年份/月份选择器的按钮属于独立的year/month slot，因此需要单独配置样式：

修改后的完整配置示例 #

slotProps={{
  // 保留已生效的日期选中样式
  day: {
    sx: {
      '&.MuiPickersDay-root.Mui-selected': {
        backgroundColor: '#f0ca4d',
      },
    },
  },
  // 新增年份选择器选中样式
  year: {
    sx: {
      '&.MuiPickersYear-yearButton.Mui-selected': {
        backgroundColor: '#f0ca4d',
        color: '#ffffff', // 可选：调整选中年份的文字颜色
        '&:hover': {
          backgroundColor: '#e0b945', // 可选：优化hover状态颜色
        },
      },
    },
  },
  // 如需修改月份选择器，添加以下配置
  month: {
    sx: {
      '&.MuiPickersMonth-monthButton.Mui-selected': {
        backgroundColor: '#f0ca4d',
        color: '#ffffff',
      },
    },
  },
}}

样式不生效的排查方案 #

如果配置后仍无效果，可通过以下方式提升样式优先级：

• 在样式属性后添加!important强制生效：

  backgroundColor: '#f0ca4d !important'
  

• 用嵌套选择器增强权重：

  year: {
    sx: {
      '&.MuiPickersYear-yearButton': {
        '&.Mui-selected': {
          backgroundColor: '#f0ca4d',
        },
      },
    },
  },
  

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