Combining CSS Modules with Ant Design in ReactJs results in compatibility issues

Question

Combining CSS Modules with Ant Design in ReactJs results in compatibility issues

Struggling to implement CSS Modules for styling in my ReactJs project, I followed the ant design documentation found here: . Unfortunately, it's not working as expected when trying to override the component styles of an ant Button.

Below is a snippet from MyContainer.less file:

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

Code snippet:

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;

Using Ant design (Version 4.3.0) with react (Version 16.13.1) and Webpack (Version 4.42.0). Installed less-loader (Version 7.3.0) and babel-plugin-import (Version 1.13.3).

Unsure if there's a specific Webpack configuration missing or if the issue lies elsewhere?

css reactjs webpack css-modules ant-design-pro

Answer 1

Answer №1

Finally, I was able to resolve my issue with antd by implementing CSS modules and adding extra configurations for antd styles to work properly. The solution that worked for me can be found on this website: By following the instructions provided on the website and adding the specified configurations in the Webpack.config file under the Rule section, you can successfully use CSS modules and override 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 }}
                },
              ],
            },
            ... (remaining code follows here)

In addition to these configurations, make sure to add the 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
        }
      ]
    ]
  },

Lastly, ensure that you set the style for the wrapper div of antd Components as shown below:

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 hope this information proves helpful!

Answer 2

Finally, I was able to resolve my issue with antd by implementing CSS modules and adding extra configurations for antd styles to work properly. The solution that worked for me can be found on this website: By following the instructions provided on the website and adding the specified configurations in the Webpack.config file under the Rule section, you can successfully use CSS modules and override 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 }}
                },
              ],
            },
            ... (remaining code follows here)

In addition to these configurations, make sure to add the 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
        }
      ]
    ]
  },

Lastly, ensure that you set the style for the wrapper div of antd Components as shown below:

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 hope this information proves helpful!

Combining CSS Modules with Ant Design in ReactJs results in compatibility issues

Answer №1

Similar questions

Hold off on rendering until the useEffect is complete

The find() method is returning true even though the item is not actually found within the array

"Upon setting the state in React, the Full Calendar refreshes and retrieves events

Erase Content Inside the <div> Tag

While HTML and CSS collaborate seamlessly during development, CSS mysteriously disappears when transitioning to production mode

Horizontal image scrolling problem across different browsers

The children elements inside a parent div with Flexbox are now taking on the height of their container

How to create fading directional navigation arrows using the Orbit jQuery plugin?

React-Bootstrap Popup encounters overlay failure

Fluid Centered UL with Bullet Points

What is the import syntax in React that enables optimized tree shaking?

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

What causes the content of a sticky navbar to overflow?

The horizontal scrolling with overflow-x is not functioning correctly as it is displaying the scrollbar for the vertical

In TypeScript, the 'as const' syntax results in a syntax error due to the missing semicolon

The most efficient method for interacting with externally generated HTML in Rails

Using React with an Array of Promises in Typescript

Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

Certain web browsers are experiencing difficulty in scrolling down on the website

Ways to enhance the header design in a Next.js app using Material-UI in ReactJs