In my reactJS app, I've setted up some datepicker and everything works good.

在我的reactJS应用程序中，我设置了一些Date Picker，一切都运行得很好。

In a custom page, i have another datepicker and i see a strange red border around it:

在自定义页面中，我有另一个DatePicker，并且我看到它周围有一个奇怪的红色边框：

The code is:

代码是：

<DatePicker
        disableFuture
        style={{ width: "90%", border: "1px solid black" }}
        inputFormat="yyyy-MM-dd"
        renderInput={(params) => <TextField fullWidth {...params} />}
        value={props.value}
        fullWidth
        onMouseDown={(e) => e.stopPropagation()}
        onChange={(e) =>
          props.handleChangeComponentValue(props.id, e.target.value)
        }
        onBlur={(e) => props.handleBlurComponent(props.id, e.target.value)}
      />

inspecting it with chrome i see that the style comes from

我用铬合金检查它，发现它的风格来自

<fieldset aria-hidden="true" class="sc-gKseQn jzeLFY MuiOutlinedInput-notchedOutline-SmBCs dwFpjw MuiOutlinedInput-notchedOutline">
    <legend class="sc-iBPTik gOBiIn">
        <span class="notranslate">&ZeroWidthSpace;</span>
    </legend>
</fieldset>

in particular:

尤其是：

.hiztcv.Mui-error .MuiOutlinedInput-notchedOutline {
    border-color: #f44336;
}

I'm not setting any class of it, and that color is not set in my project.

我没有设置它的任何类别，也没有在我的项目中设置这种颜色。

Did i miss something?

我错过了什么吗？

To fix this issue we can apply slotProps in the Date picker component.

要解决此问题，我们可以在日期选取器组件中应用slotProps。

Visit https://mui.com/x/react-date-pickers/custom-components/

请访问https://mui.com/x/react-date-pickers/custom-components/。

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    slotProps={{
      textField: {
        size: "small"
        error: false,
      },
    }}
    value={value || dayjs(field.value)}
    onChange={field.onChange}
  />
</LocalizationProvider>;

I also faced the same issue. When I console.log params coming to the renderInput property, I saw that it has the default property of error:true.

我也面临着同样的问题。当我将.log参数添加到renderInput属性时，我看到它的默认属性为Error：True。

So you can fix it like this:

因此，您可以这样修复它：

<DatePicker
    ...
    renderInput={(params) => <TextField {...params} error={false} />}
    ...
/>

I had the same case and the problem was in the initial value of the date. It was an empty string and DatePicker interpreted it as an invalid date, so I changed the initial value to undefined, and now it has today's date as default and doesn't has an error state.

我也有同样的情况，问题出在日期的初始值上。它是一个空字符串，而Datepicker将其解释为无效日期，因此我将初始值更改为UNDefined，现在它将今天的日期作为默认日期，并且没有错误状态。

enter image description here

在此处输入图像描述

This behaviour is seen when you are using two material UI data-picker components simultaneous in a single page.There are two ways of solving this
one is overriding the css
other is by setting the default value of error={false}
1.Overriding the css

当您在单个页面中同时使用两个重要的UI数据选取器组件时，会出现这种行为。有两种方法可以解决此问题，一种是覆盖CSS，另一种是通过设置缺省值Error={False}。覆盖CSS

<div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-error MuiInputBase-formControl MuiInputBase-adornedEnd css-1bn53lx"><input aria-invalid="true" id=":r1m:" placeholder="mm/dd/yyyy" type="tel" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-1uvydh2" value=""><div class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1nvf7g0"><button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-slyssw" tabindex="0" type="button" aria-label="Choose date"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CalendarIcon"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"></path></svg><span class="MuiTouchRipple-root css-w0pj6f"></span></button></div><fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-igs3ac"><legend class="css-ihdtdm"><span class="notranslate">​</span></legend></fieldset></div>

The above code has Mui-error class which is responsible for show that red line. You can try overriding that.

上面代码有Mui-Error类，负责显示红线。您可以尝试覆盖该选项。

1. Do pass error={false} by default where you are using renderInput component after params

<DatePicker
...
renderInput={(params) => <TextField {...params} error={false} />}
... />

The issue is that the initial value should NOT be an empty string but instead null, see info from author https://github.com/mui/mui-x/issues/10274

问题是初始值不应该是空字符串，而应该是NULL，请参阅Author https://github.com/mui/mui-x/issues/10274的信息

The currently most upvoted solution causes the issue that the date is always considered valid even if a user hasn't filled in any date...

目前最受欢迎的解决方案导致的问题是，即使用户没有填写任何日期，日期也总是被认为是有效的。