Material UI DatePicker不生效自定义主题 需应用MuiOutlinedInput样式

原因说明 #

DatePicker属于MUI X独立组件库，其内部输入框的样式优先级默认高于基础组件库的全局MuiOutlinedInput配置，若未显式指定输入框的variant为outlined，也不会匹配你配置的样式规则。

修复步骤 #

1. 确认DatePicker调用配置正确
   如果你使用的是MUI v5及更早版本，需要在renderInput属性中显式指定TextField的variant为outlined：

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

// 组件内调用示例
<DatePicker
  label="选择日期"
  value={dateValue}
  onChange={(newValue) => setDateValue(newValue)}
  renderInput={(params) => <TextField {...params} variant="outlined" />}
/>

MUI v6及以上版本无需手动配置renderInput，可直接跳过本步骤。
2. 补充全局主题配置
在你原有的主题配置的overrides节点下，新增DatePicker专属样式覆盖规则，和你已有的MuiOutlinedInput配置保持一致即可：

const theme = createTheme({
  // 原有typography、palette配置不变
  overrides: {
    // 原有MuiInputBase、MuiFormControl、MuiOutlinedInput配置不变
    // 新增以下配置
    MuiDatePicker: {
      root: {
        '& .MuiOutlinedInput-root': {
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "#CACACA",
            borderWidth: "1px",
          },
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "#CACACA",
            borderWidth: "1px",
          },
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "#1D4659",
            borderWidth: "1px",
          },
          '& .MuiOutlinedInput-input': {
            padding: "1rem",
            backgroundColor: "#fff",
            borderRadius: "4px",
          }
        }
      }
    }
  }
});

如果你使用的是MUI v5及以上版本，可将overrides节点替换为官方推荐的components节点，配置规则完全一致。

拓展适配 #

如果你还用到了TimePicker、DateTimePicker、DateRangePicker等同系列日期组件，按照同样规则在overrides下添加对应组件的样式配置，即可实现全局输入框样式统一。

内容的提问来源于stack exchange，提问作者Ap-Mich