如何通过sx修改MUI DatePicker 6.19.7选中日期的背景色？

问题出在你只覆盖了Mui-selected状态的样式，但当你点击选中日期时，该元素会同时触发Mui-focusVisible状态，这个状态的默认样式优先级更高，导致点击时看不到你设置的红色背景，只有失去焦点后才会显示。

直接在day的sx配置里同时覆盖选中状态和选中+焦点状态的样式即可：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';

<DatePicker
  label="选择日期"
  slotProps={{
    day: {
      sx: {
        // 覆盖选中状态（包括焦点状态）的背景色
        '&.Mui-selected, &.Mui-selected.Mui-focusVisible': {
          backgroundColor: 'red',
          color: '#fff', // 可选，设置文字颜色增强对比度
          '&:hover': {
            backgroundColor: '#c0392b', // 可选，hover时的深色效果
          }
        }
      }
    }
  }}
/>

为什么这样有效？ #

MUI的日期单元格在被点击选中时，会同时添加Mui-selected和Mui-focusVisible两个类名，默认情况下Mui-focusVisible的背景样式优先级高于单纯的Mui-selected，所以必须显式指定这个组合状态的样式，才能让选中后的即时显示和失焦后的显示保持一致。

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