如何重写MUI主题修改DatePicker星期表头文字颜色？

你遇到的是MUI DatePicker的星期表头（对应MuiDayCalendar-weekdayLabel组件）因主题冲突导致文字和背景同色的问题，主题前缀为my-theme，可以通过以下两种方式重写MUI主题来修复：

方式一：直接重写MuiDayCalendar的weekdayLabel样式 #

这是MUI官方推荐的主题定制方式，确保你的主题已经配置了prefix: 'my-theme'，然后在components字段里指定MuiDayCalendar的样式覆盖：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  prefix: 'my-theme', // 必须和你的主题前缀一致
  components: {
    MuiDayCalendar: {
      styleOverrides: {
        weekdayLabel: {
          color: '#333', // 替换成你需要的文字颜色，比如深灰、黑色
          // 还能加其他样式，比如调整字体大小
          fontSize: '0.875rem',
        },
      },
    },
  },
});

这样生成的类名会自动带上my-theme前缀，直接覆盖原有冲突样式。

方式二：针对Typography的caption变体做上下文限定 #

因为星期表头用的是MuiTypography的caption变体，如果你不想影响全局的caption样式，可以通过上下文限定只修改星期表头的文字颜色：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  prefix: 'my-theme',
  components: {
    MuiTypography: {
      styleOverrides: {
        caption: {
          // 只匹配带my-theme-MuiDayCalendar-weekdayLabel类的caption
          '&.my-theme-MuiDayCalendar-weekdayLabel': {
            color: '#333',
          },
        },
      },
    },
  },
});

应用主题后，检查DOM元素的类名，确认my-theme-MuiDayCalendar-weekdayLabel已经包含你设置的color样式即可。

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