如何修改MUI中DateCalendar选中日期的背景尺寸？

我在修改Material-UI（MUI）DateCalendar组件选中日期的背景尺寸时，用styled(DateCalendar)写了自定义CSS，但点击日期后日历出现布局异常。以下是我的代码，求解决方法：

我的代码

const CustomDateCalendar = styled(DateCalendar)`
  .MuiPickersCalendarHeader-root {
    display: none;
  }
  .MuiPickersDay-dayWithMargin {
      margin-top: -15px;
  }, /* 这里多了个逗号，导致CSS解析错误 */
  .MuiPickersDay-dayOutsideMonth{
      margin: 30px;
  }
  .css-i5q14k-MuiDayCalendar-header{ /* 这里用了动态类名，会随版本变化 */
      margin-top: 20px;
  }
  .MuiPickersDay-root.Mui-selected {
      background-color: #209214 !important;
  }
  
  .MuiPickersDay-root:hover {
      background-color: transparent;       
  }

  .MuiPickersDay-root.Mui-selected:hover {
      background-color: transparent;
  }
`;

const customTheme = createTheme({
    typography: {
        fontFamily: 'Arial, sans-serif',
        fontSize : 11,
        fontWeightBold : 1,
    },
    
    components: {
        MuiButton: { 
          styleOverrides: { 
            root: { minWidth: "10px",
            borderRadius: '10px' } 
          } 
        }
      },
      
});
const [selectedDate, setSelectedDate] = useState(null);
const handleDateChange = (date:any) => {
    setSelectedDate(date);
};

return (
<Box display="flex" alignItems="row" justifyContent="space-between">
<Box>
<LocalizationProvider dateAdapter={AdapterDayjs} locale="ko">
        <ThemeProvider theme={customTheme}>
            <CustomDateCalendar  
                defaultCalendarMonth={dayjs('2023-06-01')}
                disablePast = {false}
                views={['day']}
                disableFuture = {false}
                maxDate = {dayjs('2023-06-30')}
                minDate = {dayjs('2023-06-12')}
                sx={{
                    ...{
                        '& .MuiPickersDay-root.Mui-selected': {
                            width: 20,
                            height: 20,
                        }
                    },
                    marginTop: "85px",
                    marginLeft: "1px",
                    height: "180px",
                    width: "326px",
                    border: "1px solid #EFEFEF",
                    backgroundColor: "white",
                }}
                value={selectedDate}
                onChange={handleDateChange}    
                />
        </ThemeProvider>
</LocalizationProvider>
</Box> 
);
};

问题排查与修复 #

1. CSS语法错误：styled代码块中.MuiPickersDay-dayWithMargin末尾多了一个逗号，导致整个样式解析异常，这是触发布局错乱的直接原因。
2. 动态类名不可靠：.css-i5q14k-MuiDayCalendar-header是MUI自动生成的动态类名，会随版本、构建环境变化，应该替换为官方提供的稳定类名MuiDayCalendar-header。
3. 尺寸修改导致布局错位：直接修改选中日期的width和height但未设置对齐规则，破坏了原有布局，需要添加flex布局属性保证日期数字居中。
4. 样式方式冲突：同时使用styled和sx修改同一元素样式，容易出现优先级冲突，建议统一用MUI主题的styleOverrides管理组件样式，更符合最佳实践。

修复后的完整代码 #

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

const customTheme = createTheme({
  typography: {
    fontFamily: 'Arial, sans-serif',
    fontSize: 11,
    fontWeightBold: 700, // 原数值1无效，MUI fontWeight接受100-900范围的数值
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          minWidth: '10px',
          borderRadius: '10px',
        },
      },
    },
    // 统一将日历样式整合到主题配置中
    MuiPickersCalendarHeader: {
      styleOverrides: {
        root: {
          display: 'none',
        },
      },
    },
    MuiDayCalendar: {
      styleOverrides: {
        header: {
          marginTop: '20px',
        },
      },
    },
    MuiPickersDay: {
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: 'transparent',
          },
          '&.Mui-selected': {
            backgroundColor: '#209214',
            width: 20,
            height: 20,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            '&:hover': {
              backgroundColor: '#209214', // 保持选中态hover颜色一致
            },
          },
        },
        dayWithMargin: {
          marginTop: '-15px',
        },
        dayOutsideMonth: {
          margin: '30px',
        },
      },
    },
  },
});

export default function CustomCalendar() {
  const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(null);

  const handleDateChange = (date: dayjs.Dayjs | null) => {
    setSelectedDate(date);
  };

  return (</think_never_used_51bce0c785ca2f68081bfa7d91973934></think_never_used_51bce0c785ca2f68081bfa7d91973934>```tsx
    <Box display="flex" alignItems="row" justifyContent="space-between">
      <Box>
        <LocalizationProvider dateAdapter={AdapterDayjs} locale="ko">
          <ThemeProvider theme={customTheme}>
            <DateCalendar
              defaultCalendarMonth={dayjs('2023-06-01')}
              disablePast={false}
              views={['day']}
              disableFuture={false}
              maxDate={dayjs('2023-06-30')}
              minDate={dayjs('2023-06-12')}
              sx={{
                marginTop: '85px',
                marginLeft: '1px',
                height: '180px',
                width: '326px',
                border: '1px solid #EFEFEF',
                backgroundColor: 'white',
              }}
              value={selectedDate}
              onChange={handleDateChange}
            />
          </ThemeProvider>
        </LocalizationProvider>
      </Box>
    </Box>
  );
}

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