React JS MUI Datepicker strange red border

Viewed 1457

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:

enter image description here

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?

0 Answers
Related