如何修改MUI DateCalendar组件尺寸？Styled样式覆盖问题求解

问题分析 #

你代码里的styled写法存在两个关键问题：

1. 选择器中的&是HTML转义字符，在MUI的styled API中应该直接使用&来指代当前组件根元素
2. 用styled(DateCalendar)生成的组件，其根元素就是.MuiDateCalendar-root，无需再嵌套选择该类，多余的嵌套会导致样式无法匹配到目标元素

解决方案 #

方案一：直接给根组件设置样式 #

既然StyledDateCalendar本身就是.MuiDateCalendar-root的包装，直接在styled配置中写样式即可：

const StyledDateCalendar = styled(DateCalendar)({
  margin: '5px',
  height: '800px',
  width: '800px',
});

方案二：精准调整内部日历区域尺寸 #

如果你的目标是调整日历主体（而非外层容器）的大小，可以针对内部的.MuiCalendarPicker-root类设置样式，同时还能调整日期单元格的大小：

const StyledDateCalendar = styled(DateCalendar)({
  width: 'fit-content', // 让外层容器自适应内部大小
  '& .MuiCalendarPicker-root': {
    height: '800px',
    width: '800px',
    '& .MuiPickersDay-root': {
      fontSize: '1.2rem',
      padding: '12px', // 放大日期单元格
    }
  },
});

方案三：使用sx属性提升样式优先级 #

如果styled的样式还是被默认样式覆盖，可以直接通过组件的sx属性写样式，MUI的sx属性优先级通常更高：

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-gb">
  <StyledDateCalendar
    sx={{
      width: '800px',
      height: '800px',
      '& .MuiCalendarPicker-root': {
        width: '100%',
        height: '100%'
      }
    }}
    showDaysOutsideCurrentMonth
    loading={isLoading}
    onMonthChange={handleMonthChange}
    renderLoading={() => <DayCalendarSkeleton />}
    slots={{
      day: (props) => <ServerDay {...props} highlightedDays={highlightedDays} />,
    }}
  />
</LocalizationProvider>

额外提示 #

• 可以通过浏览器开发者工具查看DateCalendar的DOM结构，确认需要修改的类名，避免选择器错误
• 尽量避免使用!important，优先通过正确的选择器或sx属性来提升样式优先级

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