Change style(color) Linear Progress Bar/ Material UI / Reactjs

Question

 <LinearProgress style={{barColorPrimary: "red"}}" value={Number(campanha.Percentual)} />

How can I change the barColorPrimary of the bar? I need to use style like in code.

Answer 1

I like to use the withStyles() higher-order component to inject custom styles.

Take a look at the example for the LinearProgress here: https://codesandbox.io/s/material-demo-forked-kwvb1?file=/demo.tsx (we override barColorPrimary for the bar color and colorPrimary for the background).

More info about customizing components in Material UI can be found here: https://material-ui.com/customization/components/

Answer 2

I solved like this..

 const CustomLinearProgress = styled(LinearProgress)(({ datatype }) => ({ height: 6, borderRadius: 5, [`&.${linearProgressClasses.colorPrimary}`]: { backgroundColor: 'light gray', }, [`&.${linearProgressClasses.bar}`]: { borderRadius: 5, backgroundColor: datatype === 'finished'? 'green': 'blue', }, })); return ( <CustomLinearProgress datatype="finished" variant="determinate" value={50} /> );