反应 datepicker 自定义 css 样式

【问题标题】：react datepicker custom css styling反应 datepicker 自定义 css 样式
【发布时间】：2020-11-12 09:36:42
【问题描述】：

我在项目中有 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 个日期选择器的上述样式，它不应该影响另一个日期选择器

有没有办法做到这一点？

【问题讨论】：

标签： javascript css reactjs react-datepicker

【解决方案1】：

需要用自定义的类名包裹起来，否则会影响 react-datepicker 原来的类。

试试这个：

.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. 不要忘记您的日期选择器元素需要添加类名“myCustomData-1”。)

【讨论】：