React-calendar: Default CSS not loaded when using CSS modules

[myasul]

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

[wojtekmaj]

Can I see your Webpack config?

[myasul]

Hi!

This a snippet of my config.

                    {
                        test: /\.css$/,
                        use: [
                            require.resolve('style-loader'),
                            {
                                loader: require.resolve('css-loader'),
                                options: {
                                    importLoaders: 1,
                                    modules: true,
                                    localIdentName: '[name]__[local]__[hash:base64:5]'
                                },
                            },
                            {
                                loader: require.resolve('postcss-loader'),
                                options: {
                                    // Necessary for external CSS imports to work
                                    // https://github.com/facebookincubator/create-react-app/issues/2677
                                    ident: 'postcss',
                                    plugins: () => [
                                        require('postcss-flexbugs-fixes'),
                                        autoprefixer({
                                            browsers: [
                                            '>1%',
                                                'last 4 versions',
                                                'Firefox ESR',
                                                'not ie < 9', // React doesn't support IE8 anyway
                                            ],
                                            flexbox: 'no-2009',
                                        }),
                                    ],
                                },
                            },
                        ],
                    },

When I tried disabling the css modules it worked. Is there a way to make it work with css modules enabled? Thank you!

[wojtekmaj]

You could try and import react-calendar without the styles, and then import the styles by yourself in your own way.

[jfcali]

So, can anyone share a solution for this problem?

[spnv]

++

[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:

Working well for me...

[spnv]

I do tricky thing like below and it works

// eslint-disable-next-line
import '!style-loader!css-loader!react-big-calendar/lib/css/react-big-calendar.css';

[jfcali]

I found a solution using custom rules in webpack.

I first declared a rule where every '.css' file loaded directly from 'node_modules' does not use modules, like so:

          {
            test: /\.css$/,
            include: /node_modules/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: false
                }
              }
            ]
          },

Then I added a rule which allows React to import a flagged file which does not use css modules as well, in order to override styles, like so:

          {
            test: /\.css$/,
            resourceQuery: /override/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: false
                }
              }
            ]
          },

So wherever you are using the Picker, you can do something like this:

import DateRangePicker from '@wojtekmaj/react-daterange-picker'; // includes original CSS - no conflict with modules
import './custom.css?override'; // includes your custom CSS

A VERY important note

Newer React apps (using create-react-app v2.x) come with a pre-established rule that works similar, although it's the other way round:

          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
          // using the extension .module.css
          {
            test: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              getLocalIdent: getCSSModuleLocalIdent,
            }),
          },

This allows CSS files to be the default and by adding a custom extension, Webpack can differentiate which files should be treated as a module. Here is the changelog.

Hope this helps!

[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