Changing the inner colour of the react bootstrap ProgressBar

Question

Currently, I am using the React-bootstrap ProgressBar in my code in the following way:

<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px"}}/>

And in my CSS file, I have something like this:

.green-progress-bar .progress-bar{
    height: 100%;
    border: 1px solid #FFFFFF;
    border-radius: 19.5px;
    padding-right: 5px;

    // I am aware I can do background-color: green; 
    // but I want to change it within the JS file
}

I would like to change the colour of the actual bar itself, but my attempts don't seem to be working.

For example, I tried:

<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px", "background-colour":"green"}}/>

But this just seems to be changing the outer ProgressBar container as opposed to the actual bar.

Here is a link to the documentation page.

NOTE: I am aware that I can put something like background-color: green; in my CSS file, but I am looking for a solution that changes it within the JS file so that I can later use a variable to change the bar colour.

Answer 1

If you have ref to your bar component you can find it's child by class and then change its color.

  useEffect(() => {
    if (ref.current) {
      const inner = ref.current.querySelector(".progress-bar");
      if ( inner ) {
         inner.style.backgroundColor = "green";
      }
    }
  }, [ref]);

  <ProgressBar ref={ref} now={20} /* other stuff */ />