Material-ui: Changes color of Line Progress

Created on 13 Sep 2018 · 8Comments · Source: mui-org/material-ui

I tried to change the color of Line Progress but not successful. Do you have a sample for it?

LinearProgress docs good first issue

Source

baoduy

👍2

Most helpful comment

Hi @baoduy, try this:

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

mbrn on 13 Sep 2018

👍25 🎉6 ❤4

All 8 comments

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

support[bot] on 13 Sep 2018

@baoduy Let's us know how we could improve the documentation on this end. Maybe we could add a customization demo.

oliviertassinari on 13 Sep 2018

@oliviertassinari it will be great if we have some samples in the demo page.

Thanks and regards
Duy

baoduy on 13 Sep 2018

Hi @baoduy, try this:

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

mbrn on 13 Sep 2018

👍25 🎉6 ❤4

@mbrn Thank you for sharing this code sample. Do you want to add a third instance in this demo?https://material-ui.com/demos/progress/#linear-indeterminate

oliviertassinari on 16 Sep 2018

ok @oliviertassinari. #12883 is waiting for your approve.

mbrn on 16 Sep 2018

@oliviertassinari and @mbrn Thanks both for your help. The sample is working on my app now.

baoduy on 17 Sep 2018

for someone that want something easier, you can just ->
useStyles blah blah blah...
barroot: {
backgroundColor: #21466
},
root: {
backgroundColor: #21466
}

variant="determinate"
value={elem.progress}
classes={{
barColorPrimary: elem.barroot,
}}
className={elem.root}
/>

Change the classname background(line)
change the classes barColorPrimary backgroundcolor