React MUI @mui/x-date-pickers 6.0.3选中日期颜色异常求助

问题分析 #

你遇到的问题根源是：日历弹窗重新打开时，选中日期会自动获得焦点，MUI默认的focus状态样式优先级高于自定义的选中样式，导致自定义颜色被覆盖，点击其他区域失去焦点后才恢复正常显示。

解决方案 #

方案1：全局主题定制（推荐） #

通过createTheme全局配置MuiPickersDay组件的选中状态样式，覆盖所有相关状态（包括focus、active），确保样式优先级足够：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';
import { useState } from 'react';

// 创建自定义主题
const customTheme = createTheme({
  components: {
    MuiPickersDay: {
      styleOverrides: {
        root: {
          '&.Mui-selected': {
            backgroundColor: '#2196f3', // 替换为你的自定义颜色
            color: '#ffffff',
            '&:hover': {
              backgroundColor: '#1976d2', // 自定义hover颜色
            },
            // 强制覆盖focus状态（解决弹窗打开时的样式异常核心）
            '&.Mui-selected:focus': {
              backgroundColor: '#2196f3',
            },
            '&.Mui-selected:active': {
              backgroundColor: '#2196f3',
            }
          }
        }
      }
    }
  }
});

function CustomDatePicker() {
  const [selectedDate, setSelectedDate] = useState(dayjs());

  return (
    <ThemeProvider theme={customTheme}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker
          label="选择日期"
          value={selectedDate}
          onChange={(newVal) => setSelectedDate(newVal)}
        />
      </LocalizationProvider>
    </ThemeProvider>
  );
}

方案2：组件级SX属性定制 #

如果仅需给单个DatePicker定制样式，直接在组件sx属性中覆盖所有相关状态：

import { useState } from 'react';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';

function CustomDatePicker() {
  const [selectedDate, setSelectedDate] = useState(dayjs());

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="选择日期"
        value={selectedDate}
        onChange={(newVal) => setSelectedDate(newVal)}
        sx={{
          '& .MuiPickersDay-root.Mui-selected': {
            backgroundColor: '#2196f3',
            color: '#fff',
            // 必须覆盖focus状态
            '&:focus': {
              backgroundColor: '#2196f3',
            },
            '&:hover': {
              backgroundColor: '#1976d2',
            }
          }
        }}
      />
    </LocalizationProvider>
  );
}

额外检查点 #

确保正确绑定value和onChange属性，组件状态同步是样式正常显示的基础，避免因状态不同步导致的样式异常。

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