Material UI DateTimePicker的sx选择器无效：无法修改日历日期颜色

DateTimePicker的日历日期按钮默认样式优先级较高，直接通过sx设置外层样式无法穿透覆盖，需要精准定位到日期按钮组件进行样式修改，以下两种方法可以解决：

方法一：组件内通过sx深度选择器覆盖 #

直接在DateTimePicker的sx属性中，使用深度选择器定位到日期按钮的类名MuiPickersDay-root，设置对应颜色及状态样式：

import { useState } from 'react';
import DateTimePicker from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { useTheme } from '@mui/material/styles';

export default function CustomDateTimePicker() {
  const [value, setValue] = useState(null);
  const theme = useTheme();

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        label="选择日期时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        sx={{
          // 你已实现的输入框和图标样式
          '& .MuiInputBase-input': { color: theme.palette.primary.main },
          '& .MuiIconButton-root': { color: theme.palette.primary.main },
          // 日历日期按钮样式
          '& .MuiPickersDay-root': {
            color: theme.palette.primary.main,
            // hover状态样式
            '&:hover': {
              backgroundColor: theme.palette.primary.light,
              color: theme.palette.common.white,
            },
            // 选中日期样式
            '&.Mui-selected': {
              backgroundColor: theme.palette.primary.main,
              color: theme.palette.common.white,
            },
            // 非当月日期样式
            '&.MuiPickersDay-dayOutsideMonth': {
              color: theme.palette.primary.light,
            }
          }
        }}
      />
    </LocalizationProvider>
  );
}

通过& .MuiPickersDay-root可以穿透到日历弹窗内的日期按钮，覆盖默认的白色文本，同时可以统一处理hover、选中、非当月日期等状态的颜色，保持和主题风格一致。

方法二：全局主题配置（适合多组件复用） #

如果项目中多个DateTimePicker都需要统一修改日期颜色，可以通过自定义主题全局覆盖样式：

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

const theme = createTheme({
  components: {
    MuiPickersDay: {
      styleOverrides: {
        root: ({ theme }) => ({
          color: theme.palette.primary.main,
          '&:hover': {
            backgroundColor: theme.palette.primary.light,
            color: theme.palette.common.white,
          },
          '&.Mui-selected': {
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.common.white,
          },
          '&.MuiPickersDay-dayOutsideMonth': {
            color: theme.palette.primary.light,
          }
        })
      }
    },
    // 全局设置输入框和图标颜色（可选）
    MuiInputBase: {
      styleOverrides: {
        input: ({ theme }) => ({
          color: theme.palette.primary.main,
        })
      }
    },
    MuiIconButton: {
      styleOverrides: {
        root: ({ theme }) => ({
          color: theme.palette.primary.main,
        })
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DateTimePicker label="选择日期时间" value={null} onChange={() => {}} />
      </LocalizationProvider>
    </ThemeProvider>
  );
}

这种方式不需要在每个组件中重复写sx，直接在主题中配置MuiPickersDay的样式覆盖，优先级高于组件默认样式，适合全局统一风格的场景。

注意事项 #

• 不同版本的MUI X可能类名略有差异，可通过浏览器开发者工具确认日期按钮的实际类名（当前主流版本仍为MuiPickersDay-root）
• 如果使用深色主题，需调整选中状态的文本颜色，确保符合对比度要求
• 可直接替换theme.palette.primary.main为具体颜色值（如#1976d2），如果不需要依赖主题色

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