未选日期点击Submit时，错误提示未红显及边框未变红问题求助

问题说明 #

点击Submit按钮但未选择日期时，错误消息可正常显示，但文本未高亮为红色，输入框边框也未变为红色，需在不添加额外CSS的前提下实现这两个效果。

当前效果：

期望效果：

使用技术栈：React、react-hook-form、@mui/x-date-pickers

解决方案 #

核心是利用MUI组件内置的错误状态，给DatePicker的内部TextField设置error属性，绑定react-hook-form的错误判断结果，即可自动触发内置的错误样式。

修改后的完整代码：

import React from "react";
import { useForm, Controller } from "react-hook-form";
import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";

const DateComponent = () => {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    console.log("Formulario enviado:", data);
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      style={{ backgroundColor: "#fff", marginTop: "25px" }}
    >
      <Box width={300}>
        <Controller
          control={control}
          name="selectedDate"
          defaultValue={null}
          rules={{ required: true }}
          render={({ field }) => (
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DatePicker
                label="Date"
                {...field}
                slotProps={{
                  textField: {
                    // 关键修改：添加error属性，绑定错误状态
                    error: !!errors.selectedDate,
                    helperText: errors.selectedDate ? "Campo requerido" : "",
                  },
                }}
              />
            </LocalizationProvider>
          )}
        />

        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </Box>
    </form>
  );
};

export default DateComponent;

原理说明 #

MUI的TextField组件（DatePicker通过slotProps暴露内部的TextField配置）内置了error状态，开启后会自动触发以下样式：

• 输入框边框变为红色
• helperText文本颜色变为红色

只需通过!!errors.selectedDate将react-hook-form返回的错误对象转为布尔值，绑定到error属性，即可自动复用这些内置样式，无需额外编写CSS。

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