在未选择日期的情况下按“提交”按钮突出显示错误消息时出现问题

Question

我的网络应用程序遇到问题。当我在未选择日期的情况下按“提交”按钮时，错误消息会正确显示。但是，我注意到文本没有按应有的方式以红色突出显示。此外，我打算让边框也显示为红色。尽管我尝试了各种方法，但如果不借助外部 CSS 样式，我一直无法实现这种效果。有什么建议或解决方案可以实现这种效果而不需要额外的 CSS 吗？我感谢您就此事提供的任何指导。

这就是我的组件的出现方式：

我希望如此

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 }} // Add the required property here
          render={({ field }) => (
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DatePicker
                label="Date"
                {...field}
                slotProps={{
                  textField: {
                    helperText: errors.selectedDate ? "Campo requerido" : "",
                  },
                }}
              />
            </LocalizationProvider>
          )}
        />

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

export default DateComponent;

Answer 1

您可以在

error

内使用

textField

属性来表示

slotProps

。

<DatePicker
   label="Date"
   {...field}
   slotProps={{
     textField: {
       helperText: errors.selectedDate ? "Campo requerido" : "",
       error: !!errors.selectedDate
     },
    }}
 />