Reactjs 如何放置'；Fontsome'；在输入中的react datepicker内？

如何将“fontawesome”放在输入中的react日期选择器中？库：反应日期选择器。可能吗？我试过使用：在类上使用react-datepicker\uuuu输入容器

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={15}
    dateFormat="yyyy-MM-dd || HH:mm"
    timeCaption="time"
  /> 

.react-datepicker__input_container:after {
    color: red;
    content: 'X';
    display: inline-block;
    padding: 0 5px;
    width: 40px;
    height: 100%;
    position: absolute;
    text-align: center;
    top: 20%;
    right: 0;
}

.react-datepicker__input_container input {
    padding-right: 2.5rem;
    text-align: center;
    color: blue !important;
    font-weight: 600 !important;
}

.react-datepicker\u输入\u容器：之后{
颜色：红色；
内容：“X”；
显示：内联块；
填充：0 5px；
宽度：40px；
身高：100%；
位置：绝对位置；
文本对齐：居中；
最高：20%；
右：0；
}
.react-datepicker\uuu输入\u容器输入{
右侧填充：2.5rem；
文本对齐：居中；
颜色：蓝色！重要；
字体重量：600！重要；
}

您可以将自定义输入作为道具传递给日期选择器。创建带有FA图标的自定义输入组件，并将其作为道具传递

class CustomInput extends React.Component {
  render() {
    return (
      <div className="wrapper">
        <i onClick={this.props.onClick} aria-hidden="true" className="fa fa-calendar"></i>
        <input onClick={this.props.onClick} className="dateInput" value={this.props.value} type="text" />
      </div>
    )
  }
}

示例

.wrapper{position:relative；}
i、 fa日历{位置：绝对；顶部：1px；左侧：5px；}
.dateInput{
左侧填充：20px；
}

类CustomInput扩展了React.Component{
render（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

.wrapper { position: relative; }
i.fa-calendar { position: absolute; top: 1px; left: 5px; }

.dateInput {
  padding-left: 20px;
}