Css react datepicker输入宽度将不会调整为100%

我试图调整react datepicker输入框的宽度，但令人惊讶的是，我没有发现多少信息，也无法影响其宽度。我只想使输入宽度为其包含div的100%

预期行为 宽度应扩展到其父容器的宽度

我的约会选择者 最近的替代尝试 最近的一次尝试是这样的，但它也会影响弹出窗口的宽度，导致其超出整个屏幕的长度，因此这也不能作为解决方案：

.myContainer div {
  width: 100%;
}

实际行为 除非为宽度设置了特定的px值，否则日期选择器的长度保持不变

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

---

编辑 我认为它不像典型的

input

字段那样工作的原因是

react-datepicker

是一个

input

，它深深地嵌入了其他具有自己样式的div中（或隐藏的div）

---

编辑#2:这是一个代码笔，显示问题-

要防止弹性项目收缩，请将弹性收缩系数设置为0：

.myContainer.myItem{ 弹性收缩：0； }

.myContainer{
显示器：flex；
柔性包装：nowrap；
弯曲方向：行；
弹性：10像素；
}
.myDatePicker{
宽度：100%；
}

这是我的html

<div class="container">
    <div>
        <div class="react-datepicker-wrapper">
            <div class="react-datepicker__input-container">
                <input class="form-control" type="text" value="">
            </div>
        </div>
    </div>
</div>

---

结果是输入框的宽度延伸到100%，但弹出日期选择器框的宽度保持不变

由于Rbar的回答，我遇到了同样的问题并解决了它

用自定义容器包装DatePicker组件。然后将宽度指定给该容器及其子容器，如下所示：

import "./customDatePickerWidth.css";

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

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

//html文件
//css文件
.customDatePickerWidth，
.customDatePickerWidth>div.react-datepicker-wrapper，
.customDatePickerWidth>div>div.react-datepicker\uuu输入容器
.customDatePickerWidth>div>div.react-datepicker\uuu输入-容器输入{
宽度：100%；
身高：100%；
}
.react-datepicker\uuu输入容器{
宽度：继承；
身高：继承；
}
.react-datepicker\uuu输入-容器输入{
宽度：继承；
身高：100%；
}
.反应日期选择器包装{
宽度：100%；
}

使用样式化组件

import styled from 'styled-components';
const DatePickerStyled = styled.div`
  /* STYLE FOR WITH */
  .react-datepicker-wrapper {
    width: 100%;
  }
`;

封装组件

<DatePickerStyled>
  <DatePicker dateFormat="dd/MM/yyyy" />
</DatePickerStyled>

---

我刚刚向组件传递了一个类名：

<DatePicker className='date-input-field' />

---

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

例如：

<DatePicker wrapperClassName="datepicker" />

或者，如果您使用的是tailwindcss，只需直接应用

<DatePicker wrapperClassName="w-full" />

---

注意：这只会使包装为全宽，因此，如果希望输入字段也占据全宽，则还需要在datepicker组件上应用“width:100%”。

是否应

myItem

为

myDatePicker

？刚刚尝试了这个建议，但是宽度没有改变，我在每个项目中都使用这个日期选择器。如果能提供一个有用的代码片段来帮助您，除了我为“我的react datepicker”和“Expected behavior”下的css提供的内容之外，您还需要哪些详细信息？很乐意提供其他功能，但还有其他功能需要提供。我需要一个带有可渲染代码的JSFIDLE代码库。如果这个简单的修复程序不起作用（我有很多项目可以使用），那么应该会有一些细节您遗漏了。@Ilyas！同意。很好的解决方案。我花了几天的时间对自己进行了一次测试，差不多两年过去了，这仍然是一件事。将Autocomplete、Datepicker和simple TextField排成一行对我来说是迄今为止最大的挑战。。反应，重复，异步重击？不，怎么把这个该死的约会挑肥拣瘦的放在我想要的地方。。这是一个棘手的部分。请添加一些解释尼斯顺风实现那里感谢使用样式覆盖样式将需要

！重要信息

。尝试

宽度：100%！重要的
//html file
  <div className="customDatePickerWidth">
              <DatePicker
                placeholderText="Select Schedule Date"
             />
  </div>

//css file    
.customDatePickerWidth, 
    .customDatePickerWidth > div.react-datepicker-wrapper, 
    .customDatePickerWidth > div > div.react-datepicker__input-container
    .customDatePickerWidth > div > div.react-datepicker__input-container input {
       width: 100%;
       height: 100%;
    }
    .react-datepicker__input-container  {
        width: inherit;
        height: inherit;
      }
      .react-datepicker__input-container input {
        width: inherit;
        height: 100%;
      }

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

import styled from 'styled-components';
const DatePickerStyled = styled.div`
  /* STYLE FOR WITH */
  .react-datepicker-wrapper {
    width: 100%;
  }
`;

<DatePickerStyled>
  <DatePicker dateFormat="dd/MM/yyyy" />
</DatePickerStyled>

<DatePicker className='date-input-field' />

.date-input-field {
    max-width: 7rem;
}

<DatePicker wrapperClassName="datepicker" />

.datepicker {
    width: 100%;
}

<DatePicker wrapperClassName="w-full" />