color change for the loading bar component of material ui

Admin 1
Viewed 17343
  • I am trying to learn material ui.
  • I am trying to change the css of the loading bar.
  • I referred to the documentation and used colorPrimary classes
  • but its not changing.
  • can you tell me how to fix it so taht in future I will fix it myself
  • providing my code snippet below.
  • all my code is in ReceipeReviewCardList.js

https://codesandbox.io/s/2zonj08v5r

const styles = {
  root: {
    flexGrow: 1
  },
  colorPrimary: {
    color: "green"
  }
};


 render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <LinearProgress
          className={classes.colorPrimary}
          variant="determinate"
          value={this.state.completed}
redux material-ui reactjs css javascript
10 Answers

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.

user_18949070

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>
user_96481370

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!

user_96941740

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>
user_120360710

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 .

user_155038980

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

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

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}
/>
user_91322930

That have worked for me ! First set a className to the LinearProgress component

<LinearProgress
    className="custom-class"
    variant="determinate"
    value={MyValue}
/>

then style it from your attached css file as shown in the following :

.custom-class > * { background-color:green !important; }
.custom-class{background-color:gray !important;}

using the !important tag is premordial to override the original color.

user_109277700

  • style: progress: { color: 'red' },

  • Component: <LinearProgress color="inherit" className={classes.progress} />

user_126467440
Related