如何使用styled-components自定义MUI X Date Range Picker样式

你当前的写法不生效，主要是两个核心原因：

1. MUI的动态哈希类名（带css-前缀的类名）是构建时自动生成的，版本更新、主题配置修改都会导致类名变化，不适合作为样式匹配的依据
2. DateRangePicker的弹窗选择面板默认挂载到body根节点下，不属于DesktopDateRangePicker组件的DOM子树，你写在组件内部的类选择器无法匹配到弹窗内的元素

可行解决思路 #

1. 局部修改输入框样式（你当前要实现的输入文字改为绿色） #

优先通过MUI暴露的稳定类名匹配，同时确保styled的样式能透传到组件：

const DesktopDateRangePickerStyled = styled(DesktopDateRangePicker)`
  .MuiOutlinedInput-input {
    color: green !important;
  }
`;

// 组件使用时不需要额外配置，直接调用即可
<DesktopDateRangePickerStyled />

如果需要更高的优先级，也可以通过组件内置的slotProps属性直接配置输入框样式，无需依赖styled-components的类选择器：

<DesktopDateRangePicker
  slotProps={{
    textField: {
      sx: {
        '& .MuiOutlinedInput-input': {
          color: 'green'
        }
      }
    }
  }}
/>

2. 修改弹窗日历面板的样式 #

需要先把弹窗挂载到当前组件的父容器下，让父级的样式选择器可以匹配到弹窗内的元素：

// 先获取你当前组件的容器DOM，比如用useRef
const containerRef = useRef(null);

const DesktopDateRangePickerStyled = styled(DesktopDateRangePicker)`
  // 匹配弹窗内的日期单元格样式示例
  .MuiPickersDay-root {
    color: green;
  }
`;

return <div ref={containerRef}>
  <DesktopDateRangePickerStyled
    slotProps={{
      popper: {
        container: containerRef.current
      }
    }}
  />
</div>

注意事项 #

不要使用带css-前缀的动态类名做样式匹配，这类类名不具备稳定性，随时可能失效。

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