cannot override styles in react-date-picker - reactjs

Question

I've gone through the usual recommendations. Next.js app with postcss, sass, and tailwind.
Trying to load styles from calendar.module.scss.
.react-datepicker {
background: none;
border: none;
color: #969eac;
font-size: 1rem;
font-family: 'Mulish';
}
.react-datepicker .react-datepicker__header {
background-color: #fff !important;
}
Even with !important, the above doesn't work. If I create a class of .calendar and apply that to my component, I can at least get the main div to be styled.
import styles from './calendar.module.scss'
<ReactDatePicker
inline
calendarClassName={styles.calendar}
/>
// ./calendar.module.scss
.calendar {
background: none;
border: none;
color: #969eac;
font-size: 1rem;
font-family: 'Mulish';
}
But trying to add the child classes to this has no effect. I tried adding the .react-datepicker classes to my style.css but that isn't having an effect either.
Curious if someone might have any pointers.
Thanks!

Answer 1

I ran through the exact issue few days ago
I use SCSS with NEXT.js based react app, I will show you some code that will work if you are using material UI calendar
NOTE: this is dark theme customized calendar & pops up onClick with no textfield
import DateFnsUtils from "#date-io/date-fns";
import {DatePicker, MuiPickersUtilsProvider} from "#material-ui/pickers";
import React from "react";
import styles from "./Calendar.module.scss";
import Box from "#material-ui/core/Box";
import {createMuiTheme, MuiThemeProvider} from "#material-ui/core/styles";
import {black, white} from "material-ui/styles/colors";
export default function Calendar(props) {
const materialTheme = createMuiTheme({
palette: {
primary: {
main: '#3E3F42'
}
},
overrides: {
MuiPickersCalendarHeader: {
switchHeader: {
backgroundColor: '#303235',
color: white,
},
iconButton: {
backgroundColor: "transparent",
color: white
},
dayLabel: {
color: white //days in calendar
},
transitionContainer: {
color: white
}
},
MuiPickersBasePicker: {
pickerView: {
backgroundColor: '#3E3F42'
}
},
MuiPickersDay: {
day: {
color: white //days in calendar
},
daySelected: {
backgroundColor: '#FFC561', //calendar circle
color: black
},
current: {
backgroundColor: '#736F69',
color: white
},
},
MuiDialogActions: {
root: {
backgroundColor: '#3E3F42'
}
}
}
});
const isOpened = props.isOpened;
const topPosition = props.topPosition;
const selectedDate = props.selectedDate;
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
async function handleDateChange(date1) {
props.onChange(date1);
await sleep(700);
props.setDDOpen(false);
}
return isOpened ? (
<Box pad={{ vertical: 'small'}} className={styles.smallCard} style={{top: topPosition}}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<MuiThemeProvider theme={materialTheme}>
<DatePicker
disableToolbar
variant="static"
value={selectedDate}
onChange={handleDateChange}
/>
</MuiThemeProvider>
</MuiPickersUtilsProvider>
</Box>): null
}