React JS MUI Datepicker奇怪的红色边框

Question

在我的reactJS应用程序中，我设置了一些日期选择器，一切正常。

在自定义页面中，我有另一个日期选择器，我看到它周围有一个奇怪的红色边框：

代码是：

<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)}
      />

用 chrome 检查它我发现样式来自

<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>

尤其：

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

我没有设置它的任何类，并且我的项目中没有设置该颜色。

我错过了什么？

Answer 1

为了解决这个问题，我们可以在日期选择器组件中应用 slotProps。

访问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>;

Answer 2

我也面临同样的问题。当我将 console.log 参数传入 renderInput 属性时，我看到它的默认属性为 error:true。

所以你可以这样修复它：

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