使用MUI DatePicker的slot属性时出现控制台错误求助

问题根源在于：DatePicker会给textField slot传递一系列专为MUI组件设计的props（比如ownerState、error），而原生<div>不识别这些属性，直接传递就会触发React的属性校验警告。

方案1：用MUI Box组件替代原生div #

MUI的Box组件会自动处理这些额外的内部props，不会触发警告，同时能实现自定义className的需求：

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

// 使用Box作为textField的替代组件
<DatePicker
  slotProps={{
    textField: {
      component: Box,
      className: 'test'
    }
  }}
/>

方案2：自定义过滤props的div组件 #

如果必须使用原生div，需要手动过滤掉div不兼容的props，只保留需要的属性：

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

// 自定义div组件，过滤掉不识别的props
const CustomDiv = ({ className, ...rest }) => {
  // 移除MUI传递的、div不支持的属性
  const allowedProps = {};
  for (const key in rest) {
    if (!['ownerState', 'error'].includes(key)) {
      allowedProps[key] = rest[key];
    }
  }
  return <div className={className} {...allowedProps} />;
};

// 在DatePicker中使用自定义组件
<DatePicker
  slotProps={{
    textField: {
      component: CustomDiv,
      className: 'test'
    }
  }}
/>

补充说明 #

• ownerState是MUI内部用于管理组件样式状态的对象，原生DOM元素无法识别；
• 非布尔属性error传入false会触发警告，因为React要求布尔属性只能是true/undefined（不传），而div本身没有error属性，所以需要过滤掉。

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