Antd Styled Component DatePicker样式覆盖：如何将今日日期蓝框改红？

你当前的选择器只命中了通用日期单元格，没针对今日日期的专属类，再加上Antd用:where选择器降低了样式特殊性，这俩是样式不生效的核心原因。以下是几种可行的解决方法：

方法一：精准命中今日日期+提升选择器优先级 #

Antd给今日日期的单元格加了.ant-picker-cell-today类，你需要针对这个类编写样式，同时避开:where的影响：

/* 全局CSS文件中编写 */
.ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner {
  border-color: red !important; /* 不想用!important的话，可增加父级容器类提升优先级 */
}

/* 示例：通过父容器类提高优先级，避免!important */
.your-component-wrapper .ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner {
  border-color: red;
}

方法二：Styled Components全局样式注入 #

如果用Styled Components，可通过全局样式组件覆盖：

import { createGlobalStyle } from 'styled-components';

const DatePickerCustomStyles = createGlobalStyle`
  .ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner {
    border-color: red;
  }
`;

// 在组件中引入使用
function YourComponent() {
  return (
    <>
      <DatePickerCustomStyles />
      <DatePicker />
    </>
  );
}

方法三：修改Antd主题配置（推荐） #

无需硬写覆盖样式，直接在Antd主题中配置今日日期的边框色：

import { ConfigProvider } from 'antd';

const customTheme = {
  components: {
    DatePicker: {
      cellTodayBorderColor: 'red',
    },
  },
};

// 在根组件中包裹应用
function App() {
  return (
    <ConfigProvider theme={customTheme}>
      {/* 应用内容 */}
      <DatePicker />
    </ConfigProvider>
  );
}

注意：如果项目开启了CSS Modules，要确保覆盖样式是全局生效的——比如用非模块化CSS文件，或用:global()包裹选择器。

内容的提问来源于stack exchange，提问作者ask-N-answered