时间戳

首页 > 解决方案 > 反应 datepicker 自定义 css 样式

javascript - 反应 datepicker 自定义 css 样式

问题描述

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

有没有办法做到这一点？

标签： javascriptcssreactjsreact-datepicker

解决方案

你需要用自定义的类名来包装它，否则会影响 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;
  }
}

（PS 不要忘记您的日期选择器元素需要添加类名“myCustomData-1”。）

推荐阅读