Hello I'm building a form component but for date picker i want to use date picker of ant design, so i customizing my date picker component, but it's blue outline is not being changed, that blue outline is visible when hover or when i focus on field, Also help me if i can change color of other part like that "Today" color in calendar
Here is my code I used tailwind css i want that border or it's outline to be of black
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;
This blue line or Today
blue color is inherited from ConfigProvider
theme, token.colorPrimary
to be more specific. Changing this color prop you'll change your whole app primary color.
If you want to change only datepicker color specific you should then change components.DatePicker
color props. You can see all available changeable options, test and preview changes inside theme editor.
Or, in worse case, you can change these styles using css classes. In this case you'll need to use dev console to search for the class you'll want to change.