React JS MUI Datepicker奇怪的红色边框

发布于 2025-01-11 01:56:11 字数 1272 浏览 5 评论 0原文

在我的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;
}

我没有设置任何它的类别，颜色是没有在我的项目中设置。

我错过了什么吗？

原文

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"></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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尘曦 2025-01-18 01:56:12

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

访问 https://mui.com/x/react-date-pickers/custom -组件/

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    slotProps={{
      textField: {
        size: "small"
        error: false,
      },
    }}
    value={value || dayjs(field.value)}
    onChange={field.onChange}
  />
</LocalizationProvider>;

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

回复收藏 0 原文

你的他你的她 2025-01-18 01:56:12

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

所以你可以这样修复它：

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

I also faced the same issue. When I console.log params coming to the renderInput property, I saw that it has the default property of error:true.

So you can fix it like this:

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

回复收藏 0 原文

任性一次 2025-01-18 01:56:12

我有同样的情况，问题出在日期的初始值上。它是一个空字符串，DatePicker 将其解释为无效日期，因此我将初始值更改为 undefined，现在它默认为今天的日期，并且没有错误状态。

回复收藏 0 原文

倚栏听风 2025-01-18 01:56:12

在此处输入图像描述

当您同时使用两个材质 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类，它负责显示红线。您可以尝试覆盖它。

在 params 之后使用 renderInput 组件时，默认传递 error={false}

<日期选择器
...
renderInput={(params) =>;}
... />

enter image description here

This behaviour is seen when you are using two material UI data-picker components simultaneous in a single page.There are two ways of solving this
one is overriding the css
other is by setting the default value of error={false}
1.Overriding the 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>

The above code has Mui-error class which is responsible for show that red line. You can try overriding that.