MUI DateTimePicker颜色样式设置方案优化咨询

嗨，我来帮你捋捋MUI DateTimePicker样式优化的可行方案～你现在直接通过slotProps的sx来修改样式的做法是能生效的，但确实有更贴合MUI官方规范的方式，不仅能避免用!important，还能让样式更易维护。

• 主题定制（最官方的全局/局部样式方案）
  MUI的所有组件样式都是基于主题系统的，直接在主题里定制对应组件的样式优先级更高，完全不需要!important。你可以针对MuiPickersDay、MuiButton、MuiMenuItem这些DateTimePicker依赖的组件统一设置样式，既可以全局生效，也可以通过ThemeProvider给单个组件局部套主题。

  举个代码例子：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  import DateTimePicker from '@mui/x-date-pickers/DateTimePicker';
  
  // 定制专属主题
  const customPickerTheme = createTheme({
    components: {
      MuiPickersDay: {
        styleOverrides: {
          root: {
            '&.Mui-selected': {
              backgroundColor: 'green',
              color: 'white',
              // 还能顺便定义hover状态，体验更完整
              '&:hover': {
                backgroundColor: 'darkgreen',
              }
            }
          }
        }
      },
      MuiButton: {
        styleOverrides: {
          text: {
            color: 'green',
          }
        }
      },
      MuiMenuItem: {
        styleOverrides: {
          root: {
            '&.Mui-selected': {
              backgroundColor: 'green',
              color: 'white',
              '&:hover': {
                backgroundColor: 'darkgreen',
              }
            }
          }
        }
      }
    }
  });
  
  // 给目标DateTimePicker套上主题
  <ThemeProvider theme={customPickerTheme}>
    <DateTimePicker 
      value={formValue ? dayjs(formValue) : null}
    />
  </ThemeProvider>
  

• 单个组件的slotProps优化（不用全局改）
  如果你只想给这一个DateTimePicker改样式，完全可以保留slotProps的写法，但其实可以去掉!important试试——因为slotProps的sx是直接作用在对应插槽的根元素上，它的选择器优先级已经足够覆盖组件的默认样式，之前加!important大概率是没必要的。

  优化后的代码：

  <DateTimePicker 
    value={formValue ? dayjs(formValue) : null} 
    slotProps={{ 
      day: { 
        sx: { 
          "&.Mui-selected": { 
            backgroundColor: "green", 
            color: "white", 
          }, 
        }, 
      }, 
      popper: { 
        sx: { 
          "& .MuiButton-text": { 
            color: "green", 
          }, 
          "& .MuiMenuItem-root.Mui-selected": { 
            backgroundColor: "green", 
            color: "white", 
          }, 
        }, 
      }, 
    }} 
  />
  

• styled函数定制专属组件
  你也可以用MUI的styled函数封装一个专属的DateTimePicker组件，把样式逻辑抽离出来，后续复用也更方便：

  import { styled } from '@mui/material/styles';
  import DateTimePicker from '@mui/x-date-pickers/DateTimePicker';
  
  const GreenDateTimePicker = styled(DateTimePicker)(({ theme }) => ({
    '& .MuiPickersDay-root.Mui-selected': {
      backgroundColor: 'green',
      color: 'white',
    },
    '& .MuiButton-text': {
      color: 'green',
    },
    '& .MuiMenuItem-root.Mui-selected': {
      backgroundColor: 'green',
      color: 'white',
    },
  }));
  
  // 使用的时候直接调用封装好的组件
  <GreenDateTimePicker 
    value={formValue ? dayjs(formValue) : null}
  />
  

总的来说，主题定制是最符合MUI设计理念的方式，而优化后的slotProps或者styled封装也能让你的代码更干净，不用依赖!important这种“暴力”的样式覆盖方式～

内容来源于stack exchange