CSS Modules + Ant design in ReactJs does not work

Question

I am trying to use CSS Modules for CSS styling of my ReactJs project, for this I applied ant design documentation (see here: https://pro.ant.design/docs/style), however unfortunately it doesn't work. The problem is that I want to override the component style of ant Button and it does not get the style. Below there is a short sample of my code: CSS class: in MyContainer.less file:

 .antButton{
    :global {
        .ant-btn-primary {
            background-color: rgb(215, 226, 233);
            border-color: #848586;
            font-size: 7pt;
            color: red !important;
         }
    }
 }

code:

import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.less';
import styles  from './MyContainer.less';

const MyContainer= () => {
        return (
          <Button type="primary" size="small" className={styles.antButton}  >Download</Button>
    );
 };
export default MyContainer;

I'm using Ant design (Version 4.3.0) in react (Version 16.13.1 ) with Webpack (Version 4.42.0).I also installed less-loader (Version 7.3.0) and babel-plugin-import (Version 1.13.3).

I don't know if there is any specific config of the Webpack that I am missing or the problem is somewhere else?

Answer 1

Finally I could handle my problem with antd, when you use css modules you have to add extra config for antd styles to work, I've found my solution in this web site: https://www.programmersought.com/article/3690902311/ As described there if you add these configs in these order in your Webpack.config in Rule section it will work with Css modules and overriding less styles of antd components.

       {
              test: /\.less$/,
              include: [/src/],
              use: [
                require.resolve('style-loader'),
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    modules: {
                      localIdentName: "[name]__[local]___[hash:base64:5]",
                    },
                    sourceMap: true
                  },
                },
                {
                  loader: require.resolve('less-loader'), // compiles Less to CSS
                  options: { lessOptions:{javascriptEnabled: true }}
                },
              ],
            },
            {
              test: /\.css$/,
              exclude: /node_modules|antd\.css/,
              use: [
                require.resolve('style-loader'),
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                    // change
                    modules: {
                      localIdentName: "[name]__[local]___[hash:base64:5]",
                    },
                  },
                },
                {
                  loader: require.resolve('postcss-loader'),
                  options: {
                    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',
                      }),
                    ],
                  },
                },
              ],
            },
            {
              test: /\.css$/,
              include: /node_modules|antd\.css/,
              use: [
                require.resolve('style-loader'),
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                    // change
                    // modules: true, // new support for css modules
                    // localIndetName: '[name]__[local]__[hash:base64:5]', //
                  },
                },
                {
                  loader: require.resolve('postcss-loader'),
                  options: {
                    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',
                      }),
                    ],
                  },
                },
              ],
            },

Also you need to add babel import in your package.json:

    "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "lib",
          "style": true
        }
      ]
    ]
  },

and you have to set style to the wrapper div of antd Components in this way:

import React from 'react';
import { Button } from 'antd';
//import 'antd/dist/antd.less'; you don't need this line when add babel.
import styles  from './MyContainer.less';

const MyContainer= () => {
        return (
<div className={styles.antButton}>
 <Button type="primary" size="small"  >Download</Button>
</div >
    );
 };
export default MyContainer;

I wish it help