Material-ui DatePicker 如何修改星期字母和月份切换箭头的颜色

实现方案 #

你可以直接在现有 MUI 主题的 styleOverrides 配置中，新增对应组件的样式覆盖规则即可实现需求：

• 星期字母表头对应 MuiDayCalendar 组件的 weekDayLabel 样式节点
• 月份切换箭头对应 MuiPickersArrowSwitcher 组件的 iconButton 样式节点

完整配置参考如下：

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

const theme = createTheme({
  components: {
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundColor: "#eaea87",
          color: "white",
        },
      },
    },
    // 修改星期字母颜色
    MuiDayCalendar: {
      styleOverrides: {
        weekDayLabel: {
          color: "#ff0000", // 替换为你需要的颜色
        }
      }
    },
    // 修改月份切换箭头颜色
    MuiPickersArrowSwitcher: {
      styleOverrides: {
        iconButton: {
          color: "#00ff00", // 替换为你需要的颜色
          // 可选：配置 hover 状态下的箭头颜色
          "&:hover": {
            color: "#0000ff"
          }
        }
      }
    }
  }
});

如果配置后不生效，可通过浏览器开发者工具检查日期弹窗内对应元素的类名，调整对应组件名即可适配不同版本的MUI。

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