0

我很难让react-datepicker在我的代码中缩小到它的父容器。我在这里找到了给它一个新样式表的建议，但我不确定为预制反应组件设置样式的推荐方法是什么。这是我的代码块：

<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>

4

1 回答 1

0

因此，在弄乱了 datepicker 的 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%"}});
于 2019-02-12T20:12:34.193 回答