Skip to content

Commit 8b81961

Browse files
committed
docs(examples) 🎨: Fix dayClassName specificity issue
- 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
1 parent 644f2f5 commit 8b81961

File tree

2 files changed

+14
-1
lines changed

2 files changed

+14
-1
lines changed

docs-site/src/components/Examples/examples.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,3 +212,16 @@
212212
font: inherit;
213213
color: #fff;
214214
}
215+
216+
.react-datepicker__day {
217+
&.highlighted-day {
218+
background-color: #ccc;
219+
color: #000;
220+
border-radius: 0.3rem;
221+
222+
&:not([aria-disabled="true"]):hover {
223+
background-color: #aaa;
224+
color: #000;
225+
}
226+
}
227+
}

docs-site/src/examples/ts/customDayClassName.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const CustomDayClassName = () => {
22
const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
33

44
const getDayClassName = (date: Date): string => {
5-
return date.getDate() === 1 ? "text-success" : "";
5+
return date.getDate() === 1 ? "highlighted-day" : "";
66
};
77

88
return (

0 commit comments

Comments
 (0)