ReactJs 中的 CSS 模块 + Ant 设计不起作用

Posted 2023-03-07

【中文标题】ReactJs 中的 CSS 模块 + Ant 设计不起作用

【英文标题】：CSS Modules + Ant design in ReactJs does not work

【发布时间】：2021-06-04 09:19:39

【问题描述】：

我正在尝试将 CSS 模块用于我的 ReactJs 项目的 CSS 样式，为此我应用了 ant 设计文档（请参阅此处：https://pro.ant.design/docs/style），但不幸的是它不起作用。 问题是我想覆盖ant Button的组件样式，它没有得到样式。 下面是我的代码的简短示例： CSS 类：在 MyContainer.less 文件中：

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

代码：

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;

我在 React（版本 16.13.1）和 Webpack（版本 4.42.0）中使用 Ant design（版本 4.3.0）。我还安装了 less-loader（版本 7.3.0）和 babel-plugin-import （版本 1.13.3）。

我不知道我是否缺少 Webpack 的任何特定配置或问题出在其他地方？

【问题讨论】：

你提到你使用了 babel-plugin-import..如果你使用它来导入 antd 样式，你为什么要在你的组件中再次导入更少的文件

感谢您的回答，但是我不知道如何使用 babel-plugin-import 进行 antd 样式，您能解释一下吗？确实我想覆盖 antd 样式，所以我添加的文件更少。

***.com/questions/66453633/… 在此处查看答案...css 模块可以开箱即用地创建反应应用程序...

如果您仍有问题，请参阅我发布的 github 链接以获得该答案

感谢@Hemanthvrm 的链接和回答，我会检查的。

【参考方案1】：

最后我可以用 antd 解决我的问题，当你使用 css 模块时，你必须添加额外的配置才能使 antd 样式工作，我在这个网站上找到了我的解决方案： https://www.programmersought.com/article/3690902311/ 如那里所述，如果您在 Webpack.config 的 Rule 部分中按这些顺序添加这些配置，它将与 Css 模块一起使用并覆盖较少样式的 antd 组件。

       
              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',
                      ),
                    ],
                  ,
                ,
              ],
            ,

你还需要在你的 package.json 中添加 babel import：

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

你必须通过这种方式为antd组件的包装器div设置样式：

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;

希望对你有帮助