Merge pull request #6194 from qburst/docs/fix/css-specificity

docs(examples) 🎨: Fix dayClassName specificity issue

Author: martijnrusschen

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;
+    }
+  }
+}

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 (