Styles from .scss file doesn't apply.

[is-paranoia]

My code:

StyledDatePicker.js

import React from 'react'
import {DayPicker} from 'react-day-picker';
import styles from 'react-day-picker/dist/style.module.css';
import newStyles from'./DatePicker.scss';

const StyledDatePicker = (props) => {
    const classNames = {...styles, ...newStyles};
    console.log('classNames', classNames);

    return (
        <DayPicker
            {...props}
            classNames={classNames}
        />
    );
}

export default StyledDatePicker;

DatePicker.scss

@import "react-day-picker/dist/style";

.rdp-day_today:not(.rdp-day_outside) {
  color: red;
}

.rdp {
    --rdp-cell-size: 120px; /* Size of the day cells. */
    --rdp-caption-font-size: 12px; /* Font size for the caption labels. */
    --rdp-accent-color: #1ac334; /* Accent color for the background of selected days. */
    --rdp-background-color: #1e5f04; /* Background color for the hovered/focused elements. */
    --rdp-accent-color-dark: #22cc24; /* Accent color for the background of selected days (to use in dark-mode). */
    --rdp-background-color-dark: #180270; /* Background color for the hovered/focused elements (to use in dark-mode). */
    --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
    --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
    --rdp-selected-color: #fff; /* Color of selected day text */
}

.head { color: blue !important }

No one of my new styles isn't working. But default styles of react-day-picker are working good.

I noticed that if I change .head { color: ... } in my scss to red for example, it will be applied on the page without reload. If I reload the page, my styles will disappear again. What am I doing wrong? I've already tried all styled-components methods, all css modules, etc.

We used Webpack, React, styled-components, MUI, etc.

[gpbl]

Hi @is-paranoia! Is there a way to replicate your issue by forking this code-sandbox? https://codesandbox.io/s/react-day-picker-8-vl4ry?file=/src/App.tsx

If your styles are not imported, check if your CSS needs a .module.css extension to work as CSS modules. It would help also to know the content of that newStyles object (e.g. console.log(newStyles)).

[is-paranoia]

I apologize that I could not provide CodeSandbox. The fact is that the .scss import works fine in it.

I haven’t fully figured it out, but I’ll still leave the solution in our project. Apparently it's all about our frontend configuration
In our project we managed to do this:

We add the default library styles to the DatePicker.scss file. That is, just Crtl+C from lib & Ctrl+V.

.rdp {
  --rdp-cell-size: 40px; /* Size of the day cells. */
  --rdp-caption-font-size: 18px; /* Font size for the caption labels. */
  --rdp-accent-color: #0000ff; /* Accent color for the background of selected days. */
  --rdp-background-color: #e7edff; /* Background color for the hovered/focused elements. */
  --rdp-accent-color-dark: #3003e1; /* Accent color for the background of selected days (to use in dark-mode). */
  --rdp-background-color-dark: #180270; /* Background color for the hovered/focused elements (to use in dark-mode). */
  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
  --rdp-selected-color: #fff; /* Color of selected day text */

  margin: 1em;
}

/* Hide elements for devices that are not screen readers */
.rdp-vhidden {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
...
...
...

In the StyledDatePicker.js file we write this (reference from https://github.com/gpbl/react-day-picker/blob/main/src/contexts/DayPicker/defaultClassNames.ts):

import ws from 'isomorphic-style-loader/withStyles';
import s from './DatePicker.scss';

const StyledDatePicker = (props) => {
    const defaultDayPickerClasses = {
        root: s['rdp'],
        multiple_months: s['rdp-multiple_months'],
        with_weeknumber: s['rdp-with_weeknumber'],
        vhidden: s['rdp-vhidden'],
        button_reset: s['rdp-button_reset'],
        button: s['rdp-button'],
        caption: s['rdp-caption'],
        caption_start: s['rdp-caption_start'],
        caption_end: s['rdp-caption_end'],
        caption_between: s['rdp-caption_between'],
        caption_label: s['rdp-caption_label'],
        caption_dropdowns: s['rdp-caption_dropdowns'],
        dropdown: s['rdp-dropdown'],
        dropdown_month: s['rdp-dropdown_month'],
        dropdown_year: s['rdp-dropdown_year'],
        dropdown_icon: s['rdp-dropdown_icon'],
        months: s['rdp-months'],
        month: s['rdp-month'],
        table: s['rdp-table'],
        tbody: s['rdp-tbody'],
        tfoot: s['rdp-tfoot'],
        head: s['rdp-head'],
        head_row: s['rdp-head_row'],
        head_cell: s['rdp-head_cell'],
        nav: s['rdp-nav'],
        nav_button: s['rdp-nav_button'],
        nav_button_previous: s['rdp-nav_button_previous'],
        nav_button_next: s['rdp-nav_button_next'],
        nav_icon: s['rdp-nav_icon'],
        row: s['rdp-row'],
        weeknumber: s['rdp-weeknumber'],
        cell: s['rdp-cell'],
        day: s['rdp-day'],
        day_today: s['rdp-day_today'],
        day_outside: s['rdp-day_outside'],
        day_selected: s['rdp-day_selected'],
        day_disabled: s['rdp-day_disabled'],
        day_hidden: s['rdp-day_hidden'],
        day_range_start: s['rdp-day_range_start'],
        day_range_end: s['rdp-day_range_end'],
        day_range_middle: s['rdp-day_range_middle']
    }

    return (
        <DayPicker
            {...props}
            classNames={defaultDayPickerClasses}
        />
    );
}

export default ws(s)(StyledDatePicker);

And that's all!

UPD: I almost forgot, the parent element must also be wrapped in ws