Edit CalendarContainer theme

[Blockspaced]

How to edit the theme of the calendar container so I can change the colors? After looking at the example I'm not sure how to make it work. I have added this as per the example: https://reactdatepicker.com/#example-calendar-container

import DatePicker, { CalendarContainer } from 'react-datepicker';

const MyContainer = ({ className, children }) => {
  return (
    <div style={{ padding: '16px', background: '#216ba5', color: '#fff' }}>
      <CalendarContainer className={className}>
        <div style={{ background: '#f0f0f0' }}>What is your favorite day?</div>
        <div style={{ position: 'relative' }}>{children}</div>
      </CalendarContainer>
    </div>
  );
};

And calendarContainer={MyContainer} to the DatePicker, but not sure what types to use for the props and what to pass, so this will just break my project. How can I modify this so it will change the colors of the container? Or maybe I can also do it through popper?

[bradlocking]

It's not possible from what I can see. Currently theming the date picker and it's relatively problematic to achieve without completely forking the CSS and modifying the variables

[bradlocking]

@Blockspaced i've worked something out with this (if it's still of interest to you). Might not be the best proposed approach by the library maintainer, but if you have the ability to compile SCSS, you can overrides the variables by defining them in your own .scss file which also imports the base CSS for the calendar:

// my-datepicker-css.scss
$datepicker__background-color: #f0f0f0 !default;
$datepicker__border-color: #aeaeae !default;
$datepicker__highlighted-color: #3dcc4a !default;
$datepicker__holidays-color: #ff6803 !default;
$datepicker__muted-color: #ccc !default;
$datepicker__selected-color: #5D67E8;
$datepicker__text-color: #000 !default;
$datepicker__header-color: #000 !default;
$datepicker__navigation-disabled-color: lighten(
  $datepicker__muted-color,
  10%
) !default;
$datepicker__border-radius: 0.3rem !default;
$datepicker__day-margin: 0.166rem !default;
$datepicker__font-size: 0.8rem !default;
$datepicker__font-family: "Helvetica Neue", helvetica, arial, sans-serif !default;
$datepicker__item-size: 1.7rem !default;
$datepicker__margin: 0.4rem !default;
$datepicker__navigation-button-size: 32px !default;
$datepicker__triangle-size: 8px !default;

@import "node_modules/react-datepicker/src/stylesheets/datepicker.scss";

and then import that into the component using the date picker, instead of the compiled CSS provided by the package:

// Other imports

import "./my-datepicker-css";

// ... Your component code

Edit: Worth adding that i've literally just worked this out and haven't fully tested all variants / configurations that the date picker can provide