color change for the loading bar component of material ui

Question

• 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}

Atheling

Answer 1

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!

Fleeta

Answer 2

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.

Delwin

Answer 3

For Material UI v5 (@mui)

<LinearProgress sx={{
                  backgroundColor: 'white',
                  '& .MuiLinearProgress-bar': {
                    backgroundColor: 'green'
                  }
                }}
                variant="determinate"
                value={10}/>

Culch

Answer 4

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>

Jyoti

Answer 5

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 .

Tantalous

Answer 6

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

Tacitus

Answer 7

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>

Glassine

Answer 8

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

Amphibrach

Answer 9

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

Inequitable

Answer 10

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.

Dees

For anyone learning, you really want to avoid using !important as much as possible, ideally not using it at all. MUI exposes a CSS class structure you can access to modify the styles of any component without having to incur in using !important. If that weren't the case, you can still use CSS specificity to override a class -- which is why you don't want to use "!important" in the first place, because it messes up with the specificity. – Osmosis

Answer 11

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

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

Known

Answer 12

For MUI 5:

import { styled } from '@mui/material/styles';
import LinearProgress from '@mui/material/LinearProgress';

const ColorLinearProgress = styled(LinearProgress)(({ theme }) => ({
    '&.MuiLinearProgress-colorPrimary': {
        backgroundColor: green[500],
    },
    '& .MuiLinearProgress-bar': {
        backgroundColor: green[100],
    },
}));

Stavanger