title: How to update style of a React element with className
body: <p>So I'm using Ant Design UI library with my create react app which is making it difficult for me to edit the style of more complicated Ant Design components. Like the progress bar is by default blue:</p>
  
  <p><a href="https://i.stack.imgur.com/SwWJM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SwWJM.png" alt="enter image description here"></a></p>
  
  <p>I want to make it another color and when I look at HTML in the Chrome console I see:</p>
  
  <p><a href="https://i.stack.imgur.com/wk4pU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wk4pU.png" alt="enter image description here"></a></p>
  
  <p>The <code>className</code> for that element is <code>ant-progress-bg</code>. Is there any way I can write some code in my React component and update the style to be from <code>style={width: "12.5%, height: 8}</code> into <code>style={color: 'red', width: "12.5%, height: 8}</code>?</p>
  
  <p>This is all the React code I need to write to generate the Progress bar using the ant design library:</p>
  
  <pre><code>import { Progress } from 'antd';
  
  &lt;Progress
      percent={percentVotes}
      showInfo={false}
      status="active"
  /&gt;
  </code></pre>
  
  <p>I've also tried importing CSS and added an "ant-progress-bg" CSS class with the styling I want but it didn't do anything.</p>
  
  <p>In my <code>Matches.css</code> file I have:</p>
  
  <pre><code>.ant-progress-bg {
      color: red;
  }
  </code></pre>
  
  <p>which I import into my <code>Matches.js</code> file with <code>import './Matches.css';</code></p>