如何在React中移除Material UI DatePicker的下划线？

我之前也踩过这个坑！你直接在DatePicker上用disableUnderline、underlineStyle这些属性肯定没用，因为material-ui-pickers的DatePicker是封装了Material-UI的TextField组件的，这类TextField专属的属性得通过TextFieldProps传递给内部的TextField才行。

给你两个靠谱的解决方法：

方法一：用官方属性直接禁用下划线 #

通过TextFieldProps把disableUnderline={true}传给内部的TextField，这是最标准的官方用法：

<DatePicker
  TextFieldProps={{ disableUnderline: true }}
  value={selectedDate}
  onChange={this.handleDateChange}
  animateYearScrolling={false}
/>

方法二：通过样式覆盖隐藏下划线 #

如果需要更灵活的样式控制，也可以通过InputProps手动设置下划线的显示样式：

<DatePicker
  TextFieldProps={{
    InputProps: {
      underline: { style: { display: 'none' } }
    }
  }}
  value={selectedDate}
  onChange={this.handleDateChange}
  animateYearScrolling={false}
/>

核心原因就是：DatePicker本身不处理这些TextField的专属配置，必须把相关属性放到TextFieldProps这个对象里，才能传递给内部真正负责渲染的TextField组件，这样设置才会生效～

内容的提问来源于stack exchange，提问作者ton1