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

因此，我将Ant Design UI库与我的create react应用程序一起使用，这使得我很难编辑更复杂的Ant Design组件的样式。与此类似，进度条默认为蓝色：

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

该元素的

className

是

antprogressbg

。是否有任何方法可以在React组件中编写一些代码，并将样式从

style={width:“12.5%，height:8}

更新为

style={color:“red”，width:“12.5%，height:8}

以下是使用ant design库生成进度条所需编写的全部代码：

import { Progress } from 'antd';

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

我用

import./Matches.css'将其导入我的
Matches.js
文件
这是一个演示

如果要更改所有位置的进度条颜色，请重写此类

.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"
/>

。我的进度条{
.ant progress bg{
背景色：红色！重要；
}
}   
您能否共享生成进度标记的react代码？如果react代码中隐藏了“ant progress bg”，则必须导入css并添加一个具有所需样式的“ant progress bg”css类。我尝试导入css并添加了一个具有所需样式的“ant progress bg”css类，但它没有做任何事情。文档介绍了这种特殊情况@KevinB谢谢，但我用了
red
作为例子。实际上，我需要该颜色才能更改为任何颜色。@QLiu然后您需要添加
！重要信息
。我更新了answer@QLiu我已经在这里创建了一个演示，如果您仍然有问题，我想您导入的样式文件的顺序是错误的。在Ant Design之后导入自定义样式css@QLiu欢迎很乐意帮忙
.my-progress-bar {
  .ant-progress-bg {
    background-color: red !important;
  }
}   

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