CODEWITHSUNDEEP
reactjsprogress-barreact-bootstrap
Evan Hessler
Evan Hessler

Reputation: 337

React Bootstrap Progress Bar Computed Color

How would I go about dynamically setting the React Bootstrap Progress Bar background color?

My attempts to edit the inner generated 'progress-bar' class have been unsuccessful. The following code will correctly set the height to 250 but the background color remains the default blue color.

import React from 'react';
import ProgressBar from 'react-bootstrap/ProgressBar';
import { withStyles } from '@material-ui/styles';

const styles = {
    progressBar: {
        height: 250,
        '& progress-bar': {
            backgroundColor: 'black'
        },
    }
}

const ProgressBarCustom = (props) => {     
    const classes = props.classes;
    return <ProgressBar className={classes.progressBar} now={props.sliderValue} label={props.valueLabel} />
}

export default withStyles(styles)(ProgressBarCustom);

Each progress bar will eventually have a computed color value, so I cannot simply edit the css stylesheet that bootstrap is using.

Upvotes: 1

Views: 2340

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

enter image description here

.progress-bar is a class. You need to use the class selector .

const styles = {
  progressBar: {
      height: 250,
      '& .progress-bar': { /* add the period */
          backgroundColor: 'black'
      },
  }
}

As a side note, you can also utilize the variant prop of the react-bootstrap progress bar. Examples:

<ProgressBar variant="warning" now={60} />
<ProgressBar variant="danger" now={80} />

react-bootstrap readily provides you the themes for the progress bars

Upvotes: 2

Related Questions