Default CSS not loaded when using CSS modules

Hi, I just wanted to ask if I’m doing it right. Whenever I add the Calendar component in my react project the default styling is not being applied.

I’m using it like this. Can you advise what I’m doing wrong? Thank you!

import React from 'react';
import Calendar from 'react-calendar';

import classes from './Filter.css';

const filter = (props) => (
    <div className={classes.Filter}>
        <Calendar />
    </div>
);

Note: I also ejected my CRA and enabled CSS modules

[harry100]

Use both style-loader and css-loader in the config.

{
            test: /\.css$/,
            use: [
              { loader: "style-loader" },
              { loader: "css-loader" },
        ]
}

This solved the issue for me

[gman666]

I suggest copying the stylesheet from dist/Calendar.css into your own project, and then customising from there.

As you appear to be using css-loader, with modules: true, everything is local scope by default. To style child selectors, you will then need to export them as global, e.g. with sass:

.reactCalendar :global { … paste all the Calendar.css styles here }

You can then include it in your jsx with:

<Calendar className={style.reactCalendar} value={new Date()} />

Working well for me…