在我的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)}
/>
Run Code Online (Sandbox Code Playgroud)
用 chrome 检查它我发现样式来自
<fieldset aria-hidden="true" class="sc-gKseQn jzeLFY MuiOutlinedInput-notchedOutline-SmBCs dwFpjw MuiOutlinedInput-notchedOutline">
<legend class="sc-iBPTik gOBiIn">
<span class="notranslate">​</span>
</legend>
</fieldset>
Run Code Online (Sandbox Code Playgroud)
尤其:
.hiztcv.Mui-error .MuiOutlinedInput-notchedOutline {
border-color: #f44336;
}
Run Code Online (Sandbox Code Playgroud)
我没有设置它的任何类,并且我的项目中没有设置该颜色。
我错过了什么?