CODEWITHSUNDEEP
reactjsprogress-barreact-bootstrap
lve
lve

Reputation: 349

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?

Upvotes: 1

Views: 13514

Answers (3)

Oscar Zhang
Oscar Zhang

Reputation: 380

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;
}

Upvotes: 4

Mix Master Mike
Mix Master Mike

Reputation: 1309

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} />

enter image description here

Upvotes: 0

G1N
G1N

Reputation: 385

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

You can read more about custom variants here.

Upvotes: 0

Related Questions