如何从我的 DatePicker 输入框中删除边框？答案

【问题标题】：How can I remove border from my DatePicker input box?如何从我的 DatePicker 输入框中删除边框？
【发布时间】：2021-09-20 07:56:04
【问题描述】：

我正在开发一个 react 组件并在其中使用 datePicker 来选择日期，当我渲染我的 DatePicker 组件时，它在我的文本框外显示一个黑色边框，我想删除该边框。

这是我的组件：

     <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: { borderWidth: 0 } }}
        />
      </div>

我引入了 customStyles 来删除该边框，但它不起作用。这是我的问题的快照：

【问题讨论】：

你有自定义的css吗？

标签： javascript css reactjs datepicker

【解决方案1】：

看起来您的输入文件没有应用 css。你可以像这样解决这个问题：

.react-datepicker-wrapper input[type="text"]{
    border: none;
}

【讨论】：

如何在不改变常用css的情况下做到这一点？有没有办法可以使用 customStyles 来做到这一点？

【解决方案2】：

尝试包装组件，或尝试我在此处提供的选项，请下次写出你使用的确切库。

<div className='col'>
 {translateText('ui.label.message.start.date')}
 <div className="customDatePicker">
   <DatePicker
     wrapperClassName="customDatePicker"
     className="customDatePicker"
     selected={this.props.startDate}
     placeholder={translateText('Start Date')}
     onChange={date => this.handleStartDateChange(date)}
     dateFormat='DD-MM-YYYY'
     />
 </div>
</div>

【讨论】：