如何通过className修改React中Ant Design进度条组件样式

嘿，我刚好碰到过类似的问题，来帮你搞定这个进度条样式的事儿～

首先，咱们先排查两个核心问题：CSS属性用错了 和 样式优先级不够，这俩是导致你的修改不生效的主要原因。

1. 先纠正错误的CSS属性 #

你写的 .ant-progress-bg { color: red; } 其实不对——color 是用来设置文字颜色的，而进度条的填充颜色是靠 background-color 控制的！所以先把代码改成：

.ant-progress-bg {
  background-color: red;
}

2. 提升样式优先级（关键） #

即使改了属性，可能还是不生效，因为Ant Design的默认样式优先级比你写的全局CSS高。这时候咱们可以通过更具体的选择器来提升权重：

/* Matches.css */
.ant-progress.ant-progress-active .ant-progress-bg {
  background-color: red;
}

这里把进度条的父类（.ant-progress 和 .ant-progress-active，对应你设置的status="active"）也加进来，选择器权重更高，就能覆盖Ant Design的默认样式了。

3. 进阶方案：用Ant Design自定义主题（推荐） #

如果你想全局统一修改Ant Design组件的样式，而不是单个组件加CSS，推荐用自定义主题的方式，更优雅也更易维护：

步骤1：安装依赖 #

npm install @craco/craco craco-antd --save

步骤2：配置craco.config.js #

在项目根目录创建这个文件，内容如下：

const CracoAntDesignPlugin = require('craco-antd');

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          '@progress-color': 'red', // 全局设置进度条颜色
        },
      },
    },
  ],
};

步骤3：修改package.json的脚本 #

把原来的react-scripts替换成craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

重启项目后，所有Progress组件的活跃状态颜色都会变成红色，不用再写额外的CSS啦～

4. 如果用了CSS Modules的情况 #

要是你的样式文件是Matches.module.css（模块化CSS），得用:global()包裹全局类名，不然模块化会给类名加哈希，匹配不上Ant Design的类：

/* Matches.module.css */
:global(.ant-progress-bg) {
  background-color: red;
}

按照上面的步骤试一下，应该就能解决你的问题啦～

内容的提问来源于stack exchange，提问作者letter Q