MUI DesktopDatePicker：如何修改YearPicker的样式？

MUI的DesktopDatePicker目前确实没有提供类似renderDay的renderYear属性，但你可以通过以下几种方式将YearPicker的蓝色改为橙色：

1. 主题定制（全局生效） #

通过覆盖MUI主题中MuiYearPicker的样式规则，全局修改年份选择器的颜色：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import DesktopDatePicker from '@mui/x-date-pickers/DesktopDatePicker';

const customTheme = createTheme({
  components: {
    MuiYearPicker: {
      styleOverrides: {
        yearButton: {
          '&.Mui-selected': {
            backgroundColor: '#ff7f00', // 选中状态橙色
            color: '#ffffff',
            '&:hover': {
              backgroundColor: '#ff9500', // 选中hover时的深橙色
            }
          },
          '&:hover:not(.Mui-selected)': {
            backgroundColor: 'rgba(255, 127, 0, 0.1)', // 未选中hover浅橙色
          }
        }
      }
    }
  }
});

// 使用ThemeProvider包裹组件
export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <DesktopDatePicker label="选择日期" {...yourProps} />
    </ThemeProvider>
  );
}

2. 自定义CSS类名（局部生效） #

给DesktopDatePicker添加自定义类名，通过CSS选择器精准定位YearPicker元素：

import DesktopDatePicker from '@mui/x-date-pickers/DesktopDatePicker';
import './DatePickerStyles.css';

export default function CustomDatePicker() {
  return (
    <DesktopDatePicker
      className="orange-year-picker"
      label="选择日期"
      {...yourProps}
    />
  );
}

对应的DatePickerStyles.css：

/* 选中状态的年份按钮 */
.orange-year-picker .MuiYearPicker-yearButton.Mui-selected {
  background-color: #ff7f00 !important;
  color: white;
}

/* 选中状态hover */
.orange-year-picker .MuiYearPicker-yearButton.Mui-selected:hover {
  background-color: #ff9500 !important;
}

/* 未选中状态hover */
.orange-year-picker .MuiYearPicker-yearButton:hover:not(.Mui-selected) {
  background-color: rgba(255, 127, 0, 0.1);
}

3. 使用slotProps（局部生效，MUI X v5.0+） #

如果使用MUI X v5.0及以上版本，可通过slotProps直接给YearPicker传入内联样式：

import DesktopDatePicker from '@mui/x-date-pickers/DesktopDatePicker';

export default function CustomDatePicker() {
  return (
    <DesktopDatePicker
      label="选择日期"
      slotProps={{
        yearPicker: {
          sx: {
            '& .MuiYearPicker-yearButton.Mui-selected': {
              backgroundColor: '#ff7f00',
              color: '#fff',
              '&:hover': { backgroundColor: '#ff9500' }
            },
            '& .MuiYearPicker-yearButton:hover:not(.Mui-selected)': {
              backgroundColor: 'rgba(255, 127, 0, 0.1)'
            }
          }
        }
      }}
      {...yourProps}
    />
  );
}

额外说明 #

目前MUI官方尚未推出renderYear这类自定义年份项渲染的API，但上述方法足以满足修改颜色的需求。如果需要更复杂的自定义（比如修改年份项的结构），可以考虑通过components属性替换默认的YearPicker组件，或者关注MUI X的后续版本更新。

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