CSS Modules + Ant design in ReactJs does not work - css

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