如何将自定义样式添加到React DatePicker（Hackerone）？

发布于 2025-02-06 13:34:54 字数 593 浏览 1 评论 0 原文

我想让此DateTime Picker占用整个屏幕，并更改某些部分的样式，例如每个时间插槽和一天的大小。

我从 https://reactdatepicker.com/#example-default.com/#example-default 回购是 https://github.com/hacker.com/hacker0x01/reaect-datepicker

任何帮助值得赞赏！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

屋顶上的小猫咪 2025-02-13 13:34:54

您可以检查示例自定义日历类名称。

它使用 datePicker property calendarclassname =“ rasta-stripes” 定义了自定义类名称。 class-name 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;
  }
}

因此，如您所见，要样式的某些零件，只需引用类对datepicker for自身覆盖它的用途即可。您可以通过浏览您的首选项检查来源检查哪些类存在。

为了使其全屏幕，例如，只需覆盖 react-datepicker-popper class-name通过删除 transform 并添加 left：0;右：0;顶部：0;底部：0; ，然后根据您的需求更改每个固定尺寸的孩子。

You can check in the examples the Custom calendar class name.

It defines a custom class name with the DatePicker property calendarClassName="rasta-stripes". The class-name rasta-stripes is defined as follow:

.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;
  }
}

So, as you can see, to style some parts just make a reference to the classes React DatePicker uses for itself to override it. You can check which classes exist by inspecting the sources with the browser of your preference.

To make it full screen for example just override the react-datepicker-popper class-name by removing transform and adding left: 0; right: 0; top: 0; bottom: 0; and then change every fixed size child to your needs.

回复收藏 0 原文

雪若未夕 2025-02-13 13:34:54

最直接的方法是覆盖内置的。

找到要编辑的类（例如 react> react-datepicker__day ）
在Dev工具中，在全局CSS文件中
，添加该类更新样式

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

很难覆盖。为此，您需要在值之后包含！重要修改器：

.react-datepicker__day {
  color: red !important;
}

如果您不想直接覆盖这些内置类，也可以定义自定义类名称并将其添加到您的全局CSS文件像以前一样：

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

The most direct way is to override the built-in react-datepicker css classes.

In dev tools, locate the class you want to edit (eg. react-datepicker__day)
In your global css file, add an entry for that class
Update the style

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

Some properties are harder to override. For these, you need to include the !important modifier after the value:

.react-datepicker__day {
  color: red !important;
}

If you don't want to directly override these built-in classes, you can also define custom class names and add them to your global css file like before:

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

回复收藏 0 原文

~没有更多了~