如何在 React 中禁用 Material UI 的日期选择器的下划线？

Posted 2023-02-22

【中文标题】如何在 React 中禁用 Material UI 的日期选择器的下划线？

【英文标题】：How to disable underline to Material UI's datepicker in React?

【发布时间】：2018-10-28 10:17:50

【问题描述】：

如何禁用在 material-ui-pickers 中显示下划线？

沙盒 https://codesandbox.io/s/l2ykr7kwvz?from-embed

我想删除其TextField 的下划线。

我试过了

disableUnderline=true

underlineStyle=display: 'non'

showingUnderline=false

但没有任何效果，如何隐藏下划线？

<DatePicker
    underlineStyle=display: 'none'
    value=selectedDate
    onChange=this.handleDateChange
    animateYearScrolling=false
/>

【问题讨论】：

经过几次，我注意到underline UI 被添加到:before 伪元素中。但是没有办法覆盖它（我没有找到任何文档）。我在他们的 GitHub 存储库上打开了一个新问题请求。 github.com/dmtrKovalenko/material-ui-pickers/issues/423

【参考方案1】：

material-ui date-picker 是一个来自基础的文本字段，您可以简单地使用 input-props 删除下划线

（DatePicker、TimePicker 和 DateTimePicker 都会这样工作）

<DatePicker
  value=selectedDate
  InputProps=
   disableUnderline: true,
  
  onChange=this.handleDateChange
/> 

从here找到示例

希望对你有帮助

【讨论】：

InputProps 是DatePicker 的一个道具。它是一个不可识别的道具，因此它被传递给TextField 组件（如here 所述）。

不仅仅是DatePicker，即使它适用于TextField。 @Nadun 和 @Juntae，非常感谢您的提问和回答。

知道如何为时间选择器做同样的事情吗？

这对我有用。谢谢你。文档中是否有关于此功能如何工作的参考？

明智的说法，InputProps 区分大小写并大写...这在属性/属性中很奇怪。讨厌的隐形故障点。