React JS MUI Datepicker strange red border

Question

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

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

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?

Answer 1

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

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