修改antd 里日期选择器DatePicker 的默认样式

要修改Ant Design（antd）中日期选择器（DatePicker）的默认样式，你可以通过CSS覆盖其默认的样式规则。以下是一个简单的例子，展示如何通过CSS修改DatePicker的背景颜色和边框颜色。

首先，在你的组件或全局样式文件中添加CSS代码：

/* 覆盖DatePicker的默认背景颜色 */
.ant-calendar-picker-container,
.ant-calendar-range-picker-input {
  background-color: #f5f5f5; /* 你想要的背景颜色 */
}
 
/* 覆盖DatePicker边框的颜色和宽度 */
.ant-calendar-picker-container input,
.ant-calendar-range-picker .ant-calendar-range-part {
  border-color: #ddd; /* 你想要的边框颜色 */
  border-width: 1px; /* 边框宽度 */
}
 
/* 如果需要修改打开日历面板时的样式 */
.ant-calendar-picker-container .ant-calendar-input {
  border-color: #ddd;
}
 
.ant-calendar-picker-container .ant-calendar {
  background-color: #fff;
}
 
.ant-calendar-date {
  /* 修改日历中日期的样式 */
}

然后，在你的React组件中使用DatePicker组件：

import React from 'react';
import { DatePicker } from 'antd';
import '你的样式文件路径.css'; // 确保引入你的CSS样式
 
const CustomDatePicker = () => (
  <DatePicker placeholder="选择日期" />
);
 
export default CustomDatePicker;

确保将CSS文件路径替换为实际文件路径。这样，DatePicker将应用你定义的自定义样式。如果你需要更多的自定义，可以继续扩展CSS选择器和规则以覆盖其他样式。