如何在MUI DatePicker v6的slotProps中为TextField传递onBlur与sx属性

你可以直接在slotProps.textField配置对象中添加onBlur回调函数和sx样式对象，写法和已有的helperText、error等属性完全一致。以下是修改后的完整组件代码：

/* eslint-disable no-unused-vars */
// @ts-nocheck
import * as React from 'react';
import { Controller } from 'react-hook-form';
import TextField from '@mui/material/TextField';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import './common.css';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
export const CustomDatePicker = (props) => {
  const { control, name, label } = props;
  const [error, setError] = React.useState(null);
  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { onChange, value, ref, onBlur: fieldOnBlur }, fieldState: { error } }) => (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DatePicker
            size="small"
            name={name}
            label={label}
            control={control}
            format="DD-MMM-YYYY"
            value={value}
            onChange={(event) => {
              onChange(event);
            }}
            disableFuture
            sx={{ width: props.width ?? 250 }}
            InputProps={{
              style: {
                padding: 8
              }
            }}
            disableMaskedInput
            slotProps={{
              textField: {
                helperText: error?.message,
                error: error?.message ? true : false,
                size: 'small',
                readOnly: true,
                // 添加sx样式
                sx: {
                  '& .MuiOutlinedInput-root': {
                    '&:hover fieldset': {
                      borderColor: '#1976d2',
                    },
                    '&.Mui-focused fieldset': {
                      borderWidth: 2,
                    }
                  },
                  marginTop: 1
                },
                // 添加onBlur回调
                onBlur: (e) => {
                  // 执行自定义逻辑
                  console.log('TextField失去焦点', e.target.value);
                  // 若需要触发react-hook-form的字段校验，调用fieldOnBlur
                  fieldOnBlur(e);
                }
              }
            }}
          />
        </LocalizationProvider>
      )}
    />
  );
};
export default CustomDatePicker;

关键说明： #

• onBlur配置：从Controller的field对象中解构出fieldOnBlur，在自定义回调里可先执行业务逻辑，再调用fieldOnBlur触发react-hook-form的失焦校验（不需要的话可只保留自定义逻辑）。
• sx配置：直接传入符合MUI sx语法的对象即可，示例中设置了输入框hover和聚焦时的边框样式、组件上边距，可根据需求调整规则。

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