如何从 DatePicker 输入框中删除边框？

Question

我正在处理一个 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 来删除该边框，但它不起作用。这是我的问题的快照：

Answer 1

您的输入字段似乎没有应用 css。你可以像这样解决这个问题：

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

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

如何从 DatePicker 输入框中删除边框？

How can I remove border from my DatePicker input box?

javascript

css

datepicker

reactjs