Skip to content

Commit 27de959

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 27de959

File tree

2 files changed

+14
-1
lines changed

2 files changed

+14
-1
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,3 +113,16 @@ input {
113113
.text-success {
114114
color: green;
115115
}
116+
117+
.react-datepicker__day {
118+
&.highlighted-day {
119+
background-color: #ccc;
120+
color: #000;
121+
border-radius: 0.3rem;
122+
123+
&:not([aria-disabled="true"]):hover {
124+
background-color: #aaa;
125+
color: #000;
126+
}
127+
}
128+
}

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)