如何覆盖DateCalendar组件颜色选择？选中过渡动画颜色未变更排查

问题描述 #

尝试覆盖DateCalendar组件的选中颜色设置，但选中时的过渡动画颜色并未改变，使用sx属性修改后无效果，代码如下：

<DateCalendar 
  defaultValue={dayjs("2022-04-17")} 
  sx={{
    "&& .Mui-selected, & .Mui-selected:hover": {
      color: "white",
      backgroundColor: 'black'
    },
    boxShadow: 3,
    borderRadius: 5,
  }}
/>

问题原因 #

1. 选择器优先级不足：默认的MuiPickersDay-root.Mui-selected样式优先级高于你使用的.Mui-selected，导致自定义样式无法生效。
2. 未覆盖过渡动画相关样式：DateCalendar的选中过渡效果绑定在日期项组件的特定状态上，单纯修改背景色不会同步修改过渡动画的颜色逻辑。

解决方案 #

直接针对MuiPickersDay-root组件的选中状态设置样式，同时显式指定过渡动画属性，确保颜色变化符合自定义需求：

<DateCalendar 
  defaultValue={dayjs("2022-04-17")} 
  sx={{
    boxShadow: 3,
    borderRadius: 5,
    // 精准定位选中的日期项，提升样式优先级
    '& .MuiPickersDay-root.Mui-selected': {
      color: 'white',
      backgroundColor: 'black',
      // 显式定义过渡动画，确保颜色变化使用自定义值
      transition: 'background-color 200ms ease-in-out',
      // 可选：自定义hover状态的颜色
      '&:hover': {
        backgroundColor: '#222',
      }
    },
    // 移除默认选中时的伪元素高亮（若存在）
    '& .MuiPickersDay-root.Mui-selected:before': {
      backgroundColor: 'transparent'
    }
  }}
/>

说明 #

• 使用.MuiPickersDay-root.Mui-selected组合选择器，确保样式优先级高于默认样式，能成功覆盖。
• 显式设置transition属性，让选中时的背景色过渡动画使用你定义的黑色，而非默认颜色。
• 若默认样式中存在:before伪元素的高亮效果（如淡色外圈），可通过设置backgroundColor: 'transparent'移除。

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