如何使用className更新React元素的样式

Question

所以我在我的create react app中使用了Ant Design UI库，这让我很难编辑更复杂的Ant Design组件的样式。就像进度条默认为蓝色：

我想让它成为另一种颜色，当我在Chrome控制台中查看HTML时，我看到：

该元素的className为ant-progress-bg。有什么办法可以在我的React组件中编写一些代码并将样式更新为style={width: "12.5%, height: 8}到style={color: 'red', width: "12.5%, height: 8}吗？

这是我需要编写的所有React代码，用于使用ant设计库生成Progress栏：

import { Progress } from 'antd';

<Progress
    percent={percentVotes}
    showInfo={false}
    status="active"
/>

我还尝试导入CSS并添加了一个＆＃34; ant-progress-bg＆＃34;我喜欢的样式的CSS类，但它没有做任何事情。

在我的Matches.css文件中，我有：

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

我使用Matches.js

导入我的import './Matches.css';文件

Answer 1

以下是演示https://codesandbox.io/s/k0m0nl1my3

如果您想更改所有地方的进度条颜色，请覆盖此类

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

如果您只想为此特定进度条更改颜色，请添加一些额外的类，如

.my-progress-bar .ant-progress-bg {
  background-color: red !important;
}

如果您使用less作为自定义样式，则更简单

.my-progress-bar {
  .ant-progress-bg {
    background-color: red !important;
  }
}   

<Progress
  percent={percentVotes}
  showInfo={false}
  status="active"
  className="my-progress-bar"
/>