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

Answer 3

我有同样的情况，问题出在日期的初始值上。这是一个空字符串，DatePicker 将其解释为无效日期，因此我将初始值更改为

undefined

，现在它默认为今天的日期，并且没有错误状态。

Answer 4

当您在单个页面中同时使用两个材质 UI 数据选择器组件时，会出现此行为。有两种方法可以解决此问题 一种是覆盖CSS 另一种是通过设置 error={false} 的默认值 1.覆盖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>

上面的代码有 Mui-error 类，它负责显示红线。您可以尝试覆盖它。

1. 在参数之后使用 renderInput 组件时，默认传递 error={false}

} ... />

Answer 5

问题是初始值不应该是空字符串，而是

null

，请参阅作者的信息https://github.com/mui/mui-x/issues/10274

接受的解决方案会导致即使用户没有填写任何日期，日期也始终被视为有效的问题...