MUI X DatePicker自定义样式求助：修改边框、文本等样式

问题场景 #

要在项目中引入MUI X的DatePicker，需要实现以下自定义样式：

• 修改输入框边框颜色
• 去除输入框圆角
• 将标签、输入文本和图标颜色改为白色

尝试用sx属性直接访问类名设置样式时，出现异常：鼠标悬停时边框变黑，偶尔样式完全失效。

问题原因 #

之前的代码存在两个关键问题：

• 使用了MUI动态生成的类名（如css-1l0x3a7-xxx），这类类名会随构建环境变化，导致样式失效
• 选择器的优先级和嵌套关系错误，无法正确覆盖MUI默认样式

正确实现方式 #

利用MUI官方提供的稳定类名，结合sx属性的嵌套选择器，精准控制不同状态下的样式。DatePicker的输入框是通过renderInput传入的TextField，因此可以直接在TextField上配置样式，确保样式指向准确。

完整代码示例 #

import { DatePicker } from '@mui/x-date-pickers';
import { TextField } from '@mui/material';

// 组件内使用
<DatePicker
  label="日期选择"
  value={selectedDate}
  onChange={handleDateChange}
  renderInput={(params) => (
    <TextField
      {...params}
      sx={{
        // 默认状态：设置边框颜色+去除圆角
        '& .MuiOutlinedInput-notchedOutline': {
          borderRadius: 0,
          borderColor: 'green',
        },
        // 鼠标悬停时的边框颜色
        '&:hover .MuiOutlinedInput-notchedOutline': {
          borderColor: 'yellow',
        },
        // 聚焦状态下的边框颜色
        '& .Mui-focused .MuiOutlinedInput-notchedOutline': {
          borderColor: 'red',
        },
        // 标签颜色（默认+聚焦状态）
        '& .MuiInputLabel-root': {
          color: 'white',
        },
        '& .MuiInputLabel-root.Mui-focused': {
          color: 'white',
        },
        // 输入文本颜色
        '& .MuiInputBase-input': {
          color: 'white',
        },
        // 日历图标颜色
        '& .MuiSvgIcon-root': {
          color: 'white',
        },
      }}
    />
  )}
/>

关键样式说明 #

• 去除圆角：针对.MuiOutlinedInput-notchedOutline设置borderRadius: 0，直接覆盖默认圆角样式
• 边框状态控制：通过&:hover（悬停）、& .Mui-focused（聚焦）的嵌套选择器，分别设置对应状态的边框颜色，确保样式优先级高于MUI默认规则
• 文本与标签颜色：直接控制.MuiInputLabel-root（标签）和.MuiInputBase-input（输入文本）的color属性，同时覆盖聚焦状态下的标签颜色，避免默认的高亮色
• 图标颜色：修改.MuiSvgIcon-root的颜色，统一日历图标的显示效果

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