material ui linear progress Пример изменения цвета

Определим свой компонент:

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { LinearProgress } from '@material-ui/core';

function ColoredLinearProgress(props) {
    const { classes } = props;
    return <LinearProgress {...props}
      classes={{
        colorPrimary: classes.colorPrimary,
        barColorPrimary: classes.barColorPrimary
      }}
    />;
}

const styles = props => ({
  colorPrimary: {
    backgroundColor: '#f2e26a', // from color
  },
  barColorPrimary: {
    backgroundColor: '#eacb04', // to color
  }
});

export default withStyles(styles)(ColoredLinearProgress);

-- тут мы задали цвета желтого оттенка - достаточно разные, чтобы разницы была заметка и прогресс-бар "переливался", при появлении.

Далее мы можем использовать наш компонент (мы переопределили цвета типа primary):

import ColoredLinearProgress from './ColoredLinearProgress';

//.........
<ColoredLinearProgress color="primary" />

На базе идеи: https://github.com/mui-org/material-ui/i...