【问题标题】:React-Datepicker: showTimeSelect margins not aligning correctlyReact-Datepicker:showTimeSelect 边距未正确对齐
【发布时间】:2018-03-23 13:18:29
【问题描述】:

正如标题所述,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>

UI 是这样的:

感谢您的宝贵时间。

编辑:

【问题讨论】:

  • 似乎有 2 个不同的 CSS 相互勾结。它应用了哪些类/属性?
  • .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list 我将对主要帖子进行编辑以显示应用于它的样式。
  • a/ 似乎有一个!important 覆盖了这个css(如未应用的padding: 5px 10px; 所示)。但是什么? b/我会说这是主要的“故障”。可能是错误的全局宽度?

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


【解决方案1】:

添加这种样式对我有用:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2010-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-21
    • 2017-07-03
    • 1970-01-01
    相关资源
    最近更新 更多