изменение цвета для компонента загрузки материала пользовательского интерфейса

Question

• Я пытаюсь изучить материал.
• Я пытаюсь изменить CSS в строке загрузки.
• Я ссылался на документацию и использовал цветовые классы
• , но это не меняется.
• Можете ли вы сказать мне, как это исправить, так что в будущем я исправлю это сам
• , предоставив мой фрагмент кода ниже.
• всемой код находится в 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}

Answer 1

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

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

не:

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

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