反应日期选择器自定义 css 样式

Question

我在项目中有 2 个反应日期选择器

在 css 文件中具有如下所示的自定义样式

.react-datepicker-wrapper,
.react-datepicker__input-container,
.react-datepicker__input-container input {
    display: block;
    width: 250px;
    margin-right: 13px;
    margin-left: 3px;
}

现在它正在申请两个日期选择器... 但我只需要 1 个日期选择器的上述样式，它不应该影响其他日期选择器

有办法吗？

Answer 1

需要用自定义的class名称包裹，否则会影响react-datepicker原有的class。

试试这个：

.myCustomDate-1 {
  .react-datepicker-wrapper,
  .react-datepicker__input-container,
  .react-datepicker__input-container input {
      display: block;
      width: 250px;
      margin-right: 13px;
      margin-left: 3px;
  }
}

( P.S。不要忘记您的日期选择器元素需要添加 class 名称“myCustomData-1”。)

反应日期选择器自定义 css 样式

react datepicker custom css styling

javascript

css

reactjs

react-datepicker