如何向React Datepicker（HackerOne）添加自定义样式？

Question

我想让这个日期时间选择器占据整个屏幕，并更改一些部分的样式，例如每个时间段和日期的大小。

我从 https://reactdatepicker.com/#example-default 得到了这个，它的 github 存储库是 https://github.com/Hacker0x01/react-datepicker

任何帮助将不胜感激！

Answer 1

您可以在示例中查看自定义日历类名称。

它使用

DatePicker

属性

calendarClassName="rasta-stripes"

定义自定义类名。类名

rasta-stripes

定义如下：

.rasta-stripes {
  .react-datepicker__week:nth-child(3n + 1) {
    background-color: #215005;
  }
  .react-datepicker__week:nth-child(3n + 2) {
    background-color: #eea429;
  }
  .react-datepicker__week:nth-child(3n + 3) {
    background-color: #a82a15;
  }
}

因此，如您所见，要设置某些部分的样式，只需引用 React DatePicker 自身使用的类来覆盖它。您可以通过使用您喜欢的浏览器检查源来检查存在哪些类。

例如，要使其全屏显示，只需通过删除

react-datepicker-popper

并添加

transform

来覆盖

left: 0; right: 0; top: 0; bottom: 0;

类名，然后根据您的需要更改每个固定大小的子级。

Answer 2

最直接的方法是重写内置的 react-datepicker css 类。

1. 在开发工具中，找到要编辑的类（例如。

   react-datepicker__day

   ）
2. 在全局 CSS 文件中，添加该类的条目
3. 更新样式

.react-datepicker__day {
  background: #0000FF;
}

如果你不想直接重写这些内置类，你也可以像以前一样定义自定义类名并将它们添加到全局 css 文件中：

<DatePicker
              inline
              selected={selectedLocalDateTime}
              onChange={onDateChange}
              dateFormat="MMMM d, yyyy"
              className='test-class'
              wrapperClassName='wrapper-class'
              calendarClassName='calendar-class'
            />