如何为MUI DatePicker添加DaisyUI的bg-primary样式？

你可以通过三种方式快速复用DaisyUI的primary色彩体系，适配MUI DatePicker：

方法1：直接使用DaisyUI的全局CSS变量 #

DaisyUI会自动在全局注入--primary、--primary-content这类颜色变量，直接在MUI的sx属性中引用即可：

<MuiDatePicker
  onOpen={() => {
    console.log('open');
  }}
  sx={{
    width: '100%',
    // 给输入框容器加背景色
    '& .MuiInputBase-root': {
      backgroundColor: 'var(--primary)',
      // 配套文字颜色，避免和背景冲突
      color: 'var(--primary-content)'
    },
    // 给弹出的日历面板也同步样式（可选）
    '& .MuiPaper-root': {
      backgroundColor: 'var(--primary)',
      color: 'var(--primary-content)'
    }
  }}
/>

方法2：用Tailwind的@apply指令复用bg-primary类 #

如果习惯Tailwind的类名写法，可以在sx中通过@apply直接应用DaisyUI生成的工具类：

<MuiDatePicker
  onOpen={() => {
    console.log('open');
  }}
  sx={{
    width: '100%',
    '& .MuiInputBase-root': {
      '@apply bg-primary text-primary-content': {}
    },
    '& .MuiPaper-root': {
      '@apply bg-primary text-primary-content': {}
    }
  }}
/>

方法3：通过slotProps给内部输入框加Tailwind类 #

MUI的DatePicker支持slotProps给内部的TextField组件直接添加className：

<MuiDatePicker
  onOpen={() => {
    console.log('open');
  }}
  sx={{ width: '100%' }}
  slotProps={{
    textField: {
      className: 'bg-primary text-primary-content'
    }
  }}
/>

补充说明 #

如果需要自定义日历面板的其他细节（比如选中日期的背景），可以继续复用DaisyUI提供的其他变量，比如--primary-focus（对应bg-primary-focus类的颜色），保持和现有DaisyUI风格的一致性。

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