Изменение цвета для компонента панели загрузки материала ui

Это потому, что вы неправильно установили CSS,

    const styles = {
  root: {
    flexGrow: 1
  },
  colorPrimary: {
    background: 'green'
  }
};

нет:

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

Надеюсь, это поможет!

Я так и сделал, создав свою тему

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

          <MuiThemeProvider theme = {theme}>
            <LinearProgress color = "secondary"/> 
          </MuiThemeProvider>

вы можете использовать пример из ответа issue в проекте material uigithub: 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);

Работает отлично.

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

Я наткнулся на простой обходной путь, который не кажется излишним взломом:

<LinearProgress
      className = "VolumeBar"
      variant = "determinate"
      value = {volume}
    />
.VolumeBar > * { background-color:green; }
.VolumeBar{background-color:gray ;}

Первое правило заставляет прогресс отображаться зеленым цветом (завершенная часть). Второе правило касается незавершенной части.

Вы можете переопределить цвета фона с помощью makeStyles.

В файле makeStyles:

export const useStyles = makeStyles(() => ({
    root: {
        "& .MuiLinearProgress-colorPrimary": {
            backgroundColor: "red",
        },
        "& .MuiLinearProgress-barColorPrimary": {
            backgroundColor: "green",
        },
    },
})

Импорт и использование:

import { useStyles } from "./myFile.style";
...
const classes = useStyles();
...
<div className = {classes.root}>
    <LinearProgress />
</div>

Это сработало для меня (материал ui версии 4):

progressbar: {
  background: 'yellow',

  '& .MuiLinearProgress-bar': {
    backgroundColor: theme.palette.success.main,
  },
},

А потом

<LinearProgress
            className = {classes.progressbar}
            variant = "determinate"
            value = {30}
/>