React Datepicker не будет сжиматься до родительского контейнера - PullRequest
Новая
       10

React Datepicker не будет сжиматься до родительского контейнера

0 голосов
/ 12 февраля 2019

Мне трудно заставить response-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>

1 Ответ

0 голосов
/ 12 февраля 2019

Итак, немного поиграв с css от DatePicker и не добившись прогресса, я изучил код для создания компонента.Компонент создает элемент ввода в качестве «портала», на который люди могут нажимать.Ввод полностью игнорирует любой CSS от своего родителя, потому что он не дал ничего при создании.Чтобы исправить эту проблему, я пошел в узлы модулей-> реагировать-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%"}});
...