From 27de959a6f95eaa27648a83489f80cabed156072 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Tue, 23 Dec 2025 18:52:26 +0530
Subject: [PATCH] =?UTF-8?q?docs(examples)=20=F0=9F=8E=A8:=20Fix=20dayClass?=
 =?UTF-8?q?Name=20specificity=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Previous `text-success` color style was overridden by the default specificity of the react-datepicker__day class.
- Added a new class to increase the specificity
---
 docs-site/src/components/Examples/style.scss     | 13 +++++++++++++
 docs-site/src/examples/ts/customDayClassName.tsx |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs-site/src/components/Examples/style.scss b/docs-site/src/components/Examples/style.scss
index 9f3fa05280..f716791d26 100644
--- a/docs-site/src/components/Examples/style.scss
+++ b/docs-site/src/components/Examples/style.scss
@@ -113,3 +113,16 @@ input {
 .text-success {
   color: green;
 }
+
+.react-datepicker__day {
+  &.highlighted-day {
+    background-color: #ccc;
+    color: #000;
+    border-radius: 0.3rem;
+
+    &:not([aria-disabled="true"]):hover {
+      background-color: #aaa;
+      color: #000;
+    }
+  }
+}
diff --git a/docs-site/src/examples/ts/customDayClassName.tsx b/docs-site/src/examples/ts/customDayClassName.tsx
index 12c307b6bc..1d5835874a 100644
--- a/docs-site/src/examples/ts/customDayClassName.tsx
+++ b/docs-site/src/examples/ts/customDayClassName.tsx
@@ -2,7 +2,7 @@ const CustomDayClassName = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const getDayClassName = (date: Date): string => {
-    return date.getDate() === 1 ? "text-success" : "";
+    return date.getDate() === 1 ? "highlighted-day" : "";
   };
 
   return (