AntD 日期范围选择器的自定义 CSS

Question

我正在尝试对表单上的 AntD 组件进行颜色编码，这样当我创建新记录时，配色方案是绿色而不是蓝色（编辑现有记录时）。标准输入运行良好，我可以有条件地覆盖边框和框阴影的样式，但是我有点卡在 DateRange 组件上。我已经成功地有条件地应用了边框和框阴影：

          <RangePicker
            disabled={editVPMapMode || isVenueCreateMode}
            className={isEditMode ? "" : "createDateRangePicker"}
            showTime={{ format: "HH:mm" }}
            name="StartEndDate"
            format="DD/MM/YYYY HH:mm"
            onChange={(e) => onDateChange(e, "RangePicker")}
          />

注意 class名称 属性中的条件。此 class 名称在 CSS:

中引用

.createDateRangePicker.ant-calendar-picker-input.ant-input:hover {
  border-color: #1f9643e5 !important;
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
  box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
}

.createDateRangePicker:hover {
  border-color: #1f9643e5 !important;
}

.createDateRangePicker.ant-picker-focused {
  border-color: #1f9643e5 !important;
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
  box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
}

.createDateRangePicker .ant-picker-active-bar {
  background-color: #1f9643e5 !important;
}

这导致 DateRange 组件具有我想要的一些功能：

注意输入部分是如何根据上述条件显示绿色边框的。但是，您也可以看到组件的其余部分还有很多蓝色需要更改。

当我检查发送到浏览器的元素时，我可以看到 DropDown 日历部分与主要 DateRange 组件分开：

另请注意，我的 class名称 createDateRangePicker 未传递到下方的下拉部分。

我有 CSS 类我想覆盖：

.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner {
  background-color: #27c456 !important;
}

.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background-color: #27c456 !important;
}

.ant-picker-cell-in-view.ant-picker-cell-today
  .ant-picker-cell-inner::before {
  border-color: #1f9643e5 !important;
}

.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
.ant-picker-time-panel-column
  > li.ant-picker-time-panel-cell-selected
  .ant-picker-time-panel-cell-inner {
  background: #e6ffe8 !important;
}

.ant-btn-primary {
background-color: #27c456 !important;
border-color: #1f9643e5 !important;
}

为此：

但是我只能做一次覆盖，不能像上面的其他控件那样让它成为有条件的 - 主要是因为那里没有使用 className。

我希望这对某些人来说足够有意义，他们可以帮助我指出正确的方向来解决这个问题。

Answer 1

看来我漏掉了一些简单的东西。有一个antD 属性我最初错过了叫dropdownClassName。我添加如下：

          <RangePicker
            disabled={editVPMapMode || isVenueCreateMode}
            className={isEditMode ? "" : "createDateRangePicker"}
            dropdownClassName={isEditMode ? "" : "createDateRangePicker"}
            showTime={{ format: "HH:mm" }}
            name="StartEndDate"
            format="DD/MM/YYYY HH:mm"
            onChange={(e) => onDateChange(e, "RangePicker")}
          />

然后更新上面的第二组 CSS 以查找提供的 class：

.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-range-start
  .ant-picker-cell-inner {
  background-color: #27c456 !important;
}

.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-range-end
  .ant-picker-cell-inner {
  background-color: #27c456 !important;
}

.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-today
  .ant-picker-cell-inner::before {
  border-color: #1f9643e5 !important;
}

.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-in-range::before,
.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
.createDateRangePicker
  .ant-picker-time-panel-column
  > li.ant-picker-time-panel-cell-selected
  .ant-picker-time-panel-cell-inner {
  background: #e6ffe8 !important;
}

.createDateRangePicker .ant-btn-primary {
  background-color: #1f9643e5 !important;
  border-color: #1f9643e5 !important;
}

现在我需要的颜色取决于我是否处于编辑模式：

或创建模式：

Answer 2

只需使用此功能，它会直接将其加载到 div。

AntD 日期范围选择器的自定义 CSS

Custom CSS for AntD Date Range Picker

css

reactjs

antd