Material UI v5.0无法自定义DatePicker？求正确实现方式

问题核心 #

通过createTheme自定义Button样式正常生效，但DatePicker、StaticDatePicker的styleOverrides无效果，原因是这类日期选择器属于MUI X组件，其结构与基础MUI组件不同，直接修改根组件样式无法覆盖内部元素的默认样式。

正确实现方式 #

需要针对日期选择器实际渲染的内部组件进行样式配置，以下是调整后的主题代码：

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

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          backgroundColor: "yellow",
          color: "red"
        }
      }
    },
    // 自定义StaticDatePicker的容器背景
    MuiStaticDatePicker: {
      styleOverrides: {
        root: {
          // 穿透修改内部Paper组件的背景
          "& .MuiPaper-root": {
            backgroundColor: "yellow",
            color: "red"
          }
        }
      }
    },
    // 自定义弹出式DatePicker的日历面板样式
    MuiCalendarPicker: {
      styleOverrides: {
        root: {
          backgroundColor: "yellow",
          color: "green"
        }
      }
    },
    // 自定义DatePicker的输入框样式（对应renderInput的TextField）
    MuiTextField: {
      styleOverrides: {
        root: {
          backgroundColor: "lightyellow"
        }
      }
    }
  }
});

关键说明 #

1. StaticDatePicker：其内部使用Paper组件作为可视容器，因此需要通过CSS选择器穿透到.MuiPaper-root来修改背景色。
2. 弹出式DatePicker：日历面板由MuiCalendarPicker组件渲染，直接修改该组件的root样式即可改变日历区域的外观。
3. 输入框样式：DatePicker的输入框由renderInput传入的TextField渲染，因此需要在MuiTextField的styleOverrides中配置。

调试技巧 #

如果不确定需要修改的组件类名，可以通过浏览器开发者工具查看元素的DOM结构，找到对应的MUI类名（如MuiCalendarPicker-root），再映射到createTheme中的组件键名（去掉后缀的-root，即MuiCalendarPicker）。

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