如何移除React中DatePicker组件输入框的默认边框？

你使用customStyles配置不生效的核心原因是 react-datepicker 组件的默认样式除了border属性外，还有outline、聚焦态boxShadow属性会产生类似边框的效果，同时自定义样式优先级可能低于全局默认样式，可通过以下方案解决： #

方案1：调整customStyles配置 #

在原有customStyles基础上补充所有边框相关属性：

<div className='col'>
  {translateText('ui.label.message.start.date')}
  <DatePicker
    selected={this.props.startDate}
    placeholder={translateText('Start Date')}
    onChange={date => this.handleStartDateChange(date)}
    dateFormat='DD-MM-YYYY'
    customStyles={{ 
      dateInput: { 
        border: 'none',
        outline: 'none',
        boxShadow: 'none'
      }
    }}
  />
</div>

方案2：通过CSS样式覆盖 #

如果方案1仍不生效，说明组件默认样式优先级更高，可直接通过组件自带类名覆盖样式：

/* 全局样式文件中添加 */
.react-datepicker__input-container input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

如果不想使用!important提升优先级，可以给外层容器加自定义类名限制作用范围：

// 组件代码修改外层容器
<div className='col date-picker-wrap'>
  {translateText('ui.label.message.start.date')}
  <DatePicker
    {/* 其余属性保持不变 */}
  />
</div>

/* 样式文件添加对应规则 */
.date-picker-wrap .react-datepicker__input-container input {
  border: none;
  outline: none;
  box-shadow: none;
}

修改后即可完全移除日期输入框的黑色边框，无需额外配置其他属性。

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