calendarClassName doesn't work

[han-yan-ds]

Describe the bug I can't style the calendar using calendarClassName like the example on https://reactdatepicker.com/, "Custom calendar class name"... there are also some other ____ClassName props that don't work either.

To Reproduce Steps to reproduce the behavior:

This is my code:

    import React, { useState } from "react";
    import DatePicker from "react-datepicker";
    import "react-datepicker/dist/react-datepicker.css";
    
    const DatePickerTest = () => {
      const [startDate, setStartDate] = useState(new Date());
     
      return (
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          className="bg-tableDark text-white" // works
          calendarClassName="bg-blue" // doesn't work
          timeClassName={() => "bg-blue"}
          popperClassName="bg-lightBlue" // works
          wrapperClassName={() => "bg-blue"} // doesn't work
          weekDayClassName={() => "bg-lime"} // works
          dayClassName={() => "bg-darkGreen"} // works
        />
      );
    };
    
    export default DatePickerTest;`

And this is what it looks like:

Expected behavior I expect calendarClassName to work like it does on the website.

[han-yan-ds]

I just looked further... many of the built-in styles (in /dist/react-datepicker.css) are overwriting the styles passed in as calendarClassName and wrapperClassName.

[guifeliper]

I have the same problem, did you found out the solution? I made my component in the Storybook and on Storybook looks good, but when I apply the component somewhere it does exactly what you say the /dist/react-datepicker.css overwrite any className

[han-yan-ds]

@guifeliper My team ended up using React-Dates

[guifeliper]

I also need time, I cannot do that move. I try to squeeze some time and fix myself.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ghost]

Issue still persists

[jasenc89]

Still an issue

[CDL-lawebb]

@jasenc89 @karolis-cekaitis @guifeliper Add !important to your styles to stop them being overwritten by the "react-datepicker/dist/react-datepicker.css" file.

[CaneteJoash]

still an issue

[matiasmoneghessi]

still issue

[comalex]

still issue