React-Datepicker:showTimeSelect边距未正确对齐

时间:2018-03-23 13:18:29

标签: reactjs semantic-ui-react react-datepicker

正如标题所述,react-datepicker时间div的边距看起来很糟糕。我在版本1.2.2上使用react-datepicker npm包(应该是它的最新版本)。我已经在我的应用初始化的根组件中包含了css:import "react-datepicker/dist/react-datepicker-cssmodules.css";

我的react-datepicker组件包含在语义-ui-react Form.Field组件中,但是即使我将Form.Field从包装中删除,时间选择器上的css仍然不稳定。

以下是我的代码:

                <Grid.Column>
                  <Form.Field error={!!fieldErrors.date}>
                    <label>
                      Label
                    </label>
                    <DatePicker
                      name="date"
                      selected={fields.date}
                      onChange={onDateChange}
                      showTimeSelect
                      timeIntervals={15}
                    />
                    <InlineError error={fieldErrors.date} />
                  </Form.Field>
                </Grid.Column>

这就是用户界面的样子:

enter image description here

感谢您的时间。

编辑:

Styles

1 个答案:

答案 0 :(得分:1)

添加此样式对我有用:

.react-datepicker__time-container   .react-datepicker__time  
.react-datepicker__time-box   ul.react-datepicker__time-list {  
     padding: 0; 
}