Question

我很难在我的代码中让react-datepicker缩小到其父容器。我已经找到了为其提供新样式表here的建议，但是我不确定为预制的React组件设计样式的推荐方法是什么。这是我的代码块：

<Card style={{height: '96%'}}>
                            <CardHeader>
                                Refine By:
                            </CardHeader>
                            <CardBody>
                                <h6>Release Date Range:</h6>
                                <Row>
                                    <Col>
                                        <div style={{paddingBottom: 10,width:'100%',display:'block',backgroundColor:'red'}}>
                                            <DatesForm dateFilter={this.state.dateFilter} logDates={this.logDates}
                                                       type={'start'} updateTable={this.filterData} style={{width:'100%'}}/>
                                        </div>
                                    </Col>
                                    <Col>
                                        <div style={{paddingBottom: 20}}>
                                            <DatesForm dateFilter={this.state.dateFilter} logDates={this.logDates}
                                                       type={'end'} updateTable={this.filterData}
                                                       style={{width:'100%'}}/>
                                        </div>
                                    </Col>
                                </Row>
                            </CardBody>
                        </Card>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

因此，在将日期选择器的CSS弄乱了一点并且没有任何进展之后，我研究了用于创建组件的代码。该组件将输入元素创建为供人们点击的“门户”。输入完全忽略来自其父级的任何css，因为在创建时未给定任何css。为了解决这个问题，我进入了节点模块-> react-datepicker-> es-> index.js

然后我编辑了这一行（在写此评论时）：

var customInput = _this.props.customInput || React.createElement("input", { type: "text" });

并对其进行了更改，以使输入的元素具有自己的宽度样式，我将其设置为100％，这样它将填充父容器。

var customInput = _this.props.customInput || React.createElement("input", { type: "text" ,style: {width: "100%"}});

React Datepicker不会缩小到父容器

1 个答案: