css - react-datepicker 输入宽度不会调整为 100%

Question

我正在尝试调整react-datepicker输入框的宽度，但令人惊讶的是发现很少的信息，并且无法影响其宽度。我只想让输入宽度为其包含的 div 的 100%。

预期行为

宽度应扩展到其父容器的宽度。

我的 react 日期选择器

<div className="myContainer">
  <DatePicker
    className="myDatePicker"
    fixedHeight
    readOnly={true}
    isClearable={false}
    placeholderText="End date"
    selected={this.props.defaultValue}
    onChange={(date) => this.props.handleDateChange(date)}
  />
</div>

预期行为

以下操作应导致 myDatePicker 与父 myContainer 宽度相同，但宽度保持不变。

.myContainer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: 1 1 0px;
}

.myDatePicker {   
  width: 100%;  // note: if I change this value to a fixed value (such as 500px) then the width is effected
}

最接近的替代尝试

最接近的尝试是这个，但它也会影响弹出窗口的宽度，导致它超出整个屏幕的长度，因此这也不能作为解决方案:

.myContainer div {
  width: 100%;
}

实际行为

日期选择器保持相同的长度，除非为宽度设置了特定的 px 值。

有人知道如何将react-datepicker的输入宽度设置为100%吗？

<小时/>

编辑我相信它不像典型的 input 字段那样工作的原因是因为 react-datepicker 是一个 input ，它嵌入在其他 div 中更深处，有自己的风格(或缺乏)

编辑#2:这是一个显示问题的代码笔 - https://codepen.io/anon/pen/bjxENG

Answer 1

我遇到了同样的问题，并通过 Rbar 的回答解决了它。

使用自定义容器包装您的 DatePicker 组件。然后将宽度分配给该容器及其子容器，如下所示:

import "./customDatePickerWidth.css";

<div className="customDatePickerWidth">
   <DatePicker dateFormat="dd/MM/yyyy" />
</div>

在customDatePickerWidth.css中:

.customDatePickerWidth, 
.customDatePickerWidth > div.react-datepicker-wrapper, 
.customDatePickerWidth > div > div.react-datepicker__input-container
.customDatePickerWidth > div > div.react-datepicker__input-container input {
   width: 100%;
}