'react-bootstrap progress bar - can you change the label color?

I'm using React-bootstrap to make a progress bar. Easy enough, it works:

<ProgressBar className="progress" striped now={this.state.now} 
label={this.state.progress + "/" + this.state.total}/>

But the label text is white. I referenced the link above and search through their short docs, but couldn't find the option. Is it possible to change the label's color?

Solution 1:^[1]

One approach is to assign a variant property, for example in React you can do the following:

<ProgressBar now={score} variant="SOME_NAME" />

Write the CSS class like so:

.bg-SOME_NAME{
  background-color: #123445!important;
}

Solution 2:^[2]

React Bootstrap components allow for custom variants, in your css you can define something like

{`
  .progress-custom {
    background-color: purple;
    color: white;
  }
`}

And then you can use it like:

<ProgressBar variant="custom" />

Solution 3:^[3]

The following worked for me. In addition to changing the color of the bar, I wanted to not have a border radius.

I set the following global styles in my styles file.

`
// this is for the bar container
background: #F8F8F8; 
border: 0px solid rgba(255, 255, 255, 1); 
border-radius: 0px; 
height: 16px;

.progress-bar {  // this is for the bar itself
  background-color: #4AA69F;
}
`

And I didn't change anything with the code. Yes, it did work.

const now = 25
const ProgressInstance = () => <ProgressBar now={now} />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Gass
Solution 2	G1N
Solution 3

'react-bootstrap progress bar - can you change the label color?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]