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

Question

我试图调整react-datepicker输入框的宽度，但令人惊讶的是，那里的信息很少，并且无法影响其宽度。我只想使输入宽度为其包含div的100％。

预期行为

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

我的反应日期选择器

<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：这是一个显示问题的Codepen- https : //codepen.io/anon/pen/bjxENG

Answer 1

简单的解决方案：将其添加到您的 css 文件中。

.react-datepicker__input-container {
  width: inherit;
}

.react-datepicker-wrapper {
  width: 100%;
}

Answer 2

由于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%;
}

Answer 3

我也偶然发现了这个问题。为了解决这个问题，有一个属性可以直接添加到 DatePicker 组件，它是“wrapperClassName”，这个属性将允许我们直接将类应用到“react-datepicker-wrapper”。

例子：

<DatePicker wrapperClassName="datepicker" />

进而

.datepicker {
    width: 100%;
}

或者如果你使用的是tailwindcss，直接申请

<DatePicker wrapperClassName="w-full" />

注意：这只会使包装器成为全宽，因此如果您希望输入字段也占据全宽，您还需要在日期选择器组件上应用“宽度：100%”。