如何覆盖materialui-daterange-picker的makeStyles样式？

1. 你定义的makeStyles没有设置注入优先级，组件内部自带的makeStyles样式注入顺序晚于你自定义的样式，优先级更高会覆盖你的规则
2. 你写的样式没有包裹在根类名下，&符号找不到对应的宿主元素，样式没有挂载到正确的节点上
3. 部分类名匹配规则可能和实际渲染的类名存在偏差

方法1：修正样式结构 + 提升优先级（最快速） #

调整你的makeStyles写法，把所有规则包在根类下，可选加!important强制提升优先级，再把生成的类名挂到选择器父容器上：

export const useDateRangePickerStyles = makeStyles({
  root: {
    '& button:disabled .materialui-daterange-picker-MuiTypography-colorTextSecondary': {
      color: 'rgba(0, 0, 0, 0.26) !important'
    },
    '& .materialui-daterange-picker-makeStyles-filled': {
      backgroundColor: '#03DAC5 !important'
    },
    '& .materialui-daterange-picker-makeStyles-highlighted': {
      backgroundColor: 'rgba(3, 218, 197, 0.08) !important'
    },
    '& .materialui-daterange-picker-makeStyles-outlined': {
      borderColor: '#03DAC5 !important'
    },
    '& .MuiPaper-elevation': {
      boxShadow: 'none !important',
      transition: 'none !important'
    }
  }
})

// 组件调用处
const classes = useDateRangePickerStyles()
return (
  <div className={classes.root}>
    <DateRangePicker {...你的组件参数} />
  </div>
)

方法2：调整样式注入顺序（不需要加!important） #

在组件外层套上MUI的StylesProvider，设置injectFirst属性让你的自定义样式后注入，自动获得更高优先级：

import { StylesProvider } from '@material-ui/core/styles'

// 外层调用处
<StylesProvider injectFirst>
  {/* 这里放你的页面/组件内容，包含DateRangePicker */}
</StylesProvider>

配置后你原来的样式去掉!important也可以正常生效。

方法3：通过组件原生classes属性覆写（最规范） #

该组件原生支持classes参数直接覆写内部样式，不需要自己写层级选择器，不会出现匹配错误问题：

const useCustomPickerStyles = makeStyles({
  filled: {
    backgroundColor: '#03DAC5'
  },
  highlighted: {
    backgroundColor: 'rgba(3, 218, 197, 0.08)'
  },
  outlined: {
    borderColor: '#03DAC5'
  }
})

// 组件调用处
const pickerClasses = useCustomPickerStyles()
return (
  <DateRangePicker
    classes={pickerClasses}
    {...其他组件参数}
  />
)

• 如果使用MUI v5版本，makeStyles已经是弃用方案，建议改用styled组件或者sx属性覆写样式，优先级更高适配性更好
• 可以打开浏览器元素调试面板，确认需要覆写的元素真实类名，避免拼写错误导致匹配失败

内容的提问来源于stack exchange，提问作者D. Messier