问题描述
我正在尝试使用 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 设计(版本 4.3.0)。我还安装了 less-loader(版本 7.3.0)和 babel-plugin-import (版本 1.13.3)。
我不知道是否有我遗漏的 Webpack 特定配置或问题出在其他地方?
解决方法
最后我可以用 antd 处理我的问题,当你使用 css 模块时,你必须为 antd 样式添加额外的配置才能工作,我在这个网站上找到了我的解决方案: https://www.programmersought.com/article/3690902311/ 如上所述,如果您在规则部分的 Webpack.config 中按这些顺序添加这些配置,它将与 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/,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',}),include: /node_modules|antd\.css/,// change
// modules: true,// new support for css modules
// localIndetName: '[name]__[local]__[hash:base64:5]',//
},
您还需要在 package.json 中添加 babel 导入:
"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;
希望对你有帮助