如何修改MUI DateTimePicker组件中AM/PM按钮的样式？

核心思路 #

MUI的DateTimePicker内部的AM/PM按钮属于Clock组件的子元素，通过浏览器开发者工具定位对应类名后，即可通过sx属性或全局主题覆盖样式。

方法一：组件sx属性局部定制 #

直接在DateTimePicker上通过类选择器定位按钮元素，按需修改样式：

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

export default function CustomDateTimePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimePicker
        label="选择日期时间"
        sx={{
          // 未选中状态的AM/PM按钮样式
          '& .MuiClock-amButton, & .MuiClock-pmButton': {
            color: '#666',
            backgroundColor: '#f8f8f8',
            '&:hover': {
              backgroundColor: '#e8e8e8',
            },
          },
          // 选中状态的AM/PM按钮样式
          '& .MuiClock-amButton.Mui-selected, & .MuiClock-pmButton.Mui-selected': {
            color: '#fff',
            backgroundColor: '#2196f3',
          },
        }}
      />
    </LocalizationProvider>
  );
}

方法二：全局主题统一修改 #

如果需要项目内统一AM/PM按钮样式，可通过createTheme覆盖MuiClock组件的默认样式：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

const customTheme = createTheme({
  components: {
    MuiClock: {
      styleOverrides: {
        amButton: {
          color: '#666',
          backgroundColor: '#f8f8f8',
          '&:hover': {
            backgroundColor: '#e8e8e8',
          },
          '&.Mui-selected': {
            color: '#fff',
            backgroundColor: '#2196f3',
          },
        },
        pmButton: {
          // 可复用amButton样式，或单独定义差异化样式
          color: '#666',
          backgroundColor: '#f8f8f8',
          '&:hover': {
            backgroundColor: '#e8e8e8',
          },
          '&.Mui-selected': {
            color: '#fff',
            backgroundColor: '#2196f3',
          },
        },
      },
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateTimePicker label="选择日期时间" />
      </LocalizationProvider>
    </ThemeProvider>
  );
}

注意事项 #

• 类名可能随MUI版本更新变化，建议右键点击按钮→选择「检查」，通过浏览器开发者工具确认最新类名，避免样式失效。

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