score:0

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

score:1

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;

score:2

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

Related Query

More Query from same tag