How to add custom style to React Datepicker (HackerOne)?-CodePudding

I want to make this DateTime picker take up the entire screen and also change the style of some parts such as the size of each time slot and day.

I've got this from

It defines a custom class name with the DatePicker property calendarClassName="rasta-stripes". The class-name rasta-stripes is defined as follow:

.rasta-stripes {
  .react-datepicker__week:nth-child(3n   1) {
    background-color: #215005;
  }
  .react-datepicker__week:nth-child(3n   2) {
    background-color: #eea429;
  }
  .react-datepicker__week:nth-child(3n   3) {
    background-color: #a82a15;
  }
}

So, as you can see, to style some parts just make a reference to the classes React DatePicker uses for itself to override it. You can check which classes exist by inspecting the sources with the browser of your preference.

To make it full screen for example just override the react-datepicker-popper class-name by removing transform and adding left: 0; right: 0; top: 0; bottom: 0; and then change every fixed size child to your needs.