Material UI：如何修改TimePicker时间选择器的AM/PM按钮背景色？

你当前的自定义样式只对输入框区域生效，是因为DateTextField基于TextField创建，样式作用域仅限于输入组件本身，而时间选择器的对话框是独立的弹出层，其中的AM/PM按钮属于ClockPicker组件的一部分，不在TextField的样式覆盖范围内。

下面提供两种可行的解决方法：

方法一：直接在DateTimePicker上定制对话框内样式 #

通过CssDateTimePicker的sx属性，直接定位对话框内的AM/PM按钮类名进行样式覆盖：

<FastField
  component={CssDateTimePicker}
  label='Start Date*'
  name='start_at'
  id='start_at'
  format={"MM/DD/YYYY"}
  color="primary"
  value={values.start_at}
  minDateTime={new Date()}
  onChange={(newValue) => {
    if (errors.start_at) {
      setFieldTouched("start_at", true)
    }
    setFieldValue("start_at", newValue);
  }}
  inputProps={{ readOnly: true }}
  disablePast={true}
  // 新增sx属性覆盖AM/PM按钮样式
  sx={{
    '& .MuiClockPicker-ampmButton': {
      color: '#fff', // 未选中状态的文字颜色
      '&.Mui-selected': {
        color: '#1976d2', // 选中状态的文字颜色
      },
      '&:hover': {
        backgroundColor: 'rgba(255,255,255,0.1)', // 鼠标悬停背景色
      }
    }
  }}
  renderInput={(params) => (
    <DateTextField
      {...params}
      autoComplete={"Off"}
      size='small'
    />
  )}
/>

方法二：通过主题全局重写样式 #

如果需要所有DatePicker的AM/PM按钮都应用该样式，可以通过自定义主题的components配置全局覆盖：

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

const customTheme = createTheme({
  components: {
    MuiClockPicker: {
      styleOverrides: {
        ampmButton: {
          color: '#fff',
          '&.Mui-selected': {
            color: '#1976d2',
          },
        },
      },
    },
  },
});

// 用ThemeProvider包裹你的组件树
<ThemeProvider theme={customTheme}>
  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <FastField
      // 你的DatePicker属性保持不变
    />
  </LocalizationProvider>
</ThemeProvider>

注意事项 #

• 确认Material UI版本对应的类名正确，MUI v5中AM/PM按钮的类名是MuiClockPicker-ampmButton，若使用旧版本需调整类名。
• 如果CssDateTimePicker是自定义封装的组件，需确保它正确传递sx属性给底层的官方DateTimePicker组件。

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