CODEWITHSUNDEEP
reactjsmaterial-ui
Ramachandran M
Ramachandran M

Reputation: 1

How to change the progress bar background color dynamically in react material ui?

//Component Style:
const BorderLinearProgress = withStyles(theme => ({
    bar: {
        borderRadius: 8,
        backgroundColor: "red"
   }
}))(LinearProgress);

//Component use:
<BorderLinearProgress variant="determinate" value={50} />

I am new to react and material-ui. In the above code I need to pass or change bar:backgroundColor dynamically. Please let me know what are the options to do. Thanks in advance

Upvotes: 0

Views: 8523

Answers (3)

Rashika Hali
Rashika Hali

Reputation: 11

Below code works fine with dynamic values and colors

const LinearProgressBar: React.FC<ILinearProps> = ({ value, color }) => {
  const useStyles = makeStyles({
    root: {
      height: 10,
      borderRadius: 5
    },
    colorPrimary: {
      backgroundColor: '#E9E9E9'
    },
    bar: {
      borderRadius: 5,
      backgroundColor: color
    }
  });

  const classes = useStyles();

  return (
    <LinearProgress
      variant="determinate"
      value={value}
      classes={{
        root: classes.root,
        colorPrimary: classes.colorPrimary,
        bar: classes.bar
      }}
    />
  );
};
export default LinearProgressBar;

Upvotes: 1

Vijay208
Vijay208

Reputation: 177

You can do it in two ways:

1). just Write

<LinearProgress  style={{backgroundColor: "red"}} variant="determinate" value={50} />

2).

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

const styles = {
  LinerProgressColor: {
    backgroundColor: 'red',
  },
};

function BorderLinearProgress (props) {
  return <LinearProgress  className={LinerProgressColor} variant="determinate" value={50} />;
}

export default withStyles(styles)(BorderLinearProgress);

Upvotes: 0

Pramod Mali
Pramod Mali

Reputation: 1798

You can pass your color with the theme variable.

// Passing theme
const useStyles = makeStyles((theme) => ({
    bar: props => ({
        borderRadius: 8,
        backgroundColor: props.color
   })
}))

//Using style in component
...
    const [progressColor, setProgressColor] = React.useState({ color: 'red' })
    const classes = useStyles(progressColor);

    // Update color based on your requirements i.e. setProgressColor({color: 'green'}) in some useEffect() when progress crosses some threshold

    return (
         <LinearProgress color={classes.bar} />
    )
...

You can find an example in official docs: https://material-ui.com/styles/basics/#adapting-based-on-props

Upvotes: 2

Related Questions