如何删除 DatePicker 输入框的边框？

Question

我正在开发一个反应组件并使用其中的

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>

Answer 3

截至 2023 年 12 月，该解决方案正在发挥作用

.react-datetime-picker__wrapper {
border: none;
}

我从源代码中查找了 .css。有一类有

__wrapper

，有

border: thin solid gray;