score:2

Accepted answer

it is because you set the css is not correctly,

    const styles = {
  root: {
    flexgrow: 1
  },
  colorprimary: {
    background: 'green'
  }
};

not:

    const styles = {
  root: {
    flexgrow: 1
  },
  colorprimary: {
    color: "green",
  }
};

hope it help!

score:0

const borderlinearprogress = withstyles((theme: theme) =>
  createstyles({
    root: {
        width: '95%',
        height: 10,
        borderradius: 5,
        margintop: 8,
        marginbottom: 20
    },
    colorprimary: {
        backgroundcolor: liquidity.colors.main.pink,
    },
    bar: {
        borderradius: 5,
        backgroundcolor: liquidity.colors.main.yellow,
    },
  }),
)(linearprogress);

score:0

this worked for me (material ui version 4):

progressbar: {
  background: 'yellow',

  '& .muilinearprogress-bar': {
    backgroundcolor: theme.palette.success.main,
  },
},

and then

<linearprogress
            classname={classes.progressbar}
            variant="determinate"
            value={30}
/>

score:0

if you want to overwrite with sx:

 sx={{
                    '& .muilinearprogress-bar1determinate': {
                        backgroundcolor: 'red',
                    }
}}

the color of the main bar is set as the backgroundcolor, not the color

score:1

i did do it by this way, creating your own theme

     import {createmuitheme, muithemeprovider } from '@material-ui/core/styles';
        
           
           const theme = createmuitheme({
              palette: {
                 secondary: {
                     main: '#42baf5'
                 }
              }
            })
     

          <muithemeprovider theme={theme}>
            <linearprogress color="secondary"/> 
          </muithemeprovider>

score:1

an easy workaround i stumbled upon which doesn't seem too much of a hack:

<linearprogress
      classname="volumebar"
      variant="determinate"
      value={volume}
    />
.volumebar > * { background-color:green; }
.volumebar{background-color:gray ;}

the first rule makes the progress appear green(completed part). the second rule takes care of the uncompleted part .

score:5

you can override the background colors with makestyles.

on makestyles file:

export const usestyles = makestyles(() => ({
    root: {
        "& .muilinearprogress-colorprimary": {
            backgroundcolor: "red",
        },
        "& .muilinearprogress-barcolorprimary": {
            backgroundcolor: "green",
        },
    },
})

import and use:

import { usestyles } from "./myfile.style";
...
const classes = usestyles();
...
<div classname={classes.root}>
    <linearprogress />
</div>

score:9

you can use example as was in the reply of the issue in material ui github project: https://github.com/mui-org/material-ui/issues/12858#issuecomment-421150158

import react, { component } from 'react';
import { withstyles } from '@material-ui/core/styles';
import { linearprogress } from '@material-ui/core';

class coloredlinearprogress extends component {
  render() {
    const { classes } = this.props;
    return <linearprogress {...this.props} classes={{colorprimary: classes.colorprimary, barcolorprimary: classes.barcolorprimary}}/>;
  }
}

const styles = props => ({
  colorprimary: {
    backgroundcolor: '#00695c',
  },
  barcolorprimary: {
    backgroundcolor: '#b2dfdb',
  }
});

export default  withstyles(styles)(coloredlinearprogress);

it works perfect.


Related Query

More Query from same tag