自定义 Antd 日期选择器的 css答案

【问题标题】：Customizing css of Antd date picker自定义 Antd 日期选择器的 css
【发布时间】：2022-10-15 05:44:56
【问题描述】：

我将 antd 库用于日期选择器目的。到目前为止，我能够对范围部分的样式进行 CSS。但我有一些问题，有人可以帮忙吗？

我在 start 、 range 和 end 之间得到了这个蓝色背景。我希望那是连续的。（图1）

所选行之间也存在间隙，我希望它本身是紫色的。但在这里我看到行之间的白色。（图1）

当我们进行范围选择时，是否可以自定义范围 css，点蓝色。可能让那东西本身变成紫色。（图2）

此外，当我在选择器关闭然后打开后悬停范围时，它应该是紫色的。（图3）

帮助将非常感激。

沙盒：https://codesandbox.io/s/black-breeze-6gmz85?file=/src/styles.css

CSS

p.ant-picker-panels > *:first-child button.ant-picker-header-next-btn {
  visibility: visible !important;
}

.ant-picker-panels > *:first-child button.ant-picker-header-super-next-btn {
  visibility: visible !important;
}

.ant-picker-panel-container,
.ant-picker-footer {
  width: 280px !important;
}

.ant-picker-footer-extra > div {
  flex-wrap: wrap !important;
}

.ant-picker-active-bar {
  display: none;
}

.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner {
  background-color: green !important;
  border-top-left-radius: 32px !important;
  border-bottom-left-radius: 32px !important;
}

.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background-color: green !important;
  border-top-right-radius: 32px !important ;
  border-bottom-right-radius: 32px !important;
}

.ant-picker-cell-in-view.ant-picker-cell-in-range::before {
  background-color: purple;
}

【问题讨论】：

标签： javascript html css reactjs antd

【解决方案1】：

对于更大的自定义，您可能会更好地为组件创建自定义主题 - https://ant.design/docs/react/customize-theme

例如

import 'antd/dist/antd.variable.min.css';
import { ConfigProvider } from 'antd';

ConfigProvider.config({
  theme: {
    primaryColor: 'green',
  },
});

如果你看看https://ant.design/components/config-provider/

它为 ConfigProvider 提供了所有可能的选项

【讨论】：