Css 在Reaction中自定义ANTD日期选取器

您好，我正在构建一个表单组件，但对于日期选取器，我想使用蚂蚁设计的日期选取器，所以我自定义了我的日期选取器组件，但它的蓝色轮廓没有改变，当悬停或当我专注于字段时，蓝色轮廓是可见的，如果我可以改变其他部分的 colored颜色 ，如日历中的"Today"色，也可以帮助我

这是我的代码，我使用tailwind CSS，我想要那个边框或它的轮廓是黑色的

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  focus:border-black focus:outline-black dark:bg-dark_background border-2 rounded-md focus:ring-0 ring-0 border-cardBorder dark:border-dark_cardBorder 
            ${
            formik.touched[name] && formik.errors[name]
              ? "border-error_red placeholder-error_red"
              : "outline-cardBorder dark:outline-dark_cardBorder "
              }
        `}
        />
      </span>
      {formik.touched[name] && formik.errors[name] && (
        <h3 className="text-xs text-error_red">{formik.errors[name]}</h3>
      )}
    </div>
  );
};

export default DatePickers;