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

Question

所以我在创建 React 应用程序时使用了 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}？

这是我使用 ant design 库生成进度条需要编写的所有 React 代码：

import { Progress } from 'antd';

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

我也试过导入 CSS 并添加了 "ant-progress-bg" CSS class 我想要的样式，但它没有做任何事情。

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

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

我使用 import './Matches.css';

将其导入我的 Matches.js 文件

Answer 1

这是一个演示 https://codesandbox.io/s/k0m0nl1my3

如果您想更改所有位置的进度条颜色，请覆盖此 class

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

如果你只想改变这个特定进度条的颜色，添加一些额外的class比如

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

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

How to update style of a React element with className

javascript

css

getelementsbyclassname

reactjs