React中自定义Ant Design DatePicker：修改边框及日历今日文本颜色

问题1：修改hover/focus状态下的黑色边框/轮廓 #

Ant Design 的 DatePicker 组件自带的 hover/focus 样式优先级高于 Tailwind 类，直接通过 focus:border-black 无法生效。需要通过自定义 CSS 覆盖组件内置样式类：

• 输入框 hover 状态：覆盖 .ant-picker:hover 的边框样式
• 输入框 focus 状态：覆盖 .ant-picker-focused 的边框和阴影样式

问题2：修改日历中“Today”文本颜色 #

日历面板中的“Today”按钮对应 Ant Design 的 .ant-picker-today-btn 类，直接修改该类的文字颜色即可。

修改后的完整代码 #

首先在全局样式文件（如 index.css）中添加以下自定义样式：

/* 覆盖DatePicker hover状态边框 */
.ant-picker:hover {
  border-color: black !important;
}

/* 覆盖DatePicker focus状态边框与阴影 */
.ant-picker-focused {
  border-color: black !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}

/* 修改日历面板Today按钮文字颜色 */
.ant-picker-today-btn {
  color: black !important;
}

/* 暗黑模式适配 */
.dark .ant-picker:hover {
  border-color: white !important;
}

.dark .ant-picker-focused {
  border-color: white !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08) !important;
}

.dark .ant-picker-today-btn {
  color: white !important;
}

调整组件代码（移除无效的 focus 相关 Tailwind 类，保留原有表单逻辑）：

import React from "react";
import { DatePicker } from 'antd';

const DatePickers = (props) => {
  const { formik, title, name, Icon, minDate, maxDate } = props;

  return (
    <div className="mb-2">
      <span className="flex">
        {Icon}
        <label
          htmlFor={name}
          className="block text-sm font-semibold text-textPrimary dark:text-dark_textPrimary"
        >
          {title}
        </label>
      </span>
      <span className="flex w-full">
        <DatePicker
          type="date"
          name={name}
          bordered={true}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          placeholder={title}
          min={minDate} 
          max={maxDate}
          className={`block w-full px-4 py-2 mt-2 text-textPrimary dark:text-dark_textPrimary bg-background dark:bg-dark_background border-2 rounded-md border-cardBorder dark:border-dark_cardBorder 
            ${formik.touched[name] && formik.errors[name]
              ? "border-error_red placeholder-error_red"
              : ""
              }
        `}
        />
      </span>
      {formik.touched[name] && formik.errors[name] && (
        <h3 className="text-xs text-error_red">{formik.errors[name]}</h3>
      )}
    </div>
  );
};

export default DatePickers;

内容的提问来源于stack exchange，提问作者Panda