如何更改 MUI LinearProgress 组件的颜色？答案

【问题标题】：How can I change the colour of a MUI LinearProgress component?如何更改 MUI LinearProgress 组件的颜色？
【发布时间】：2020-12-31 17:09:08
【问题描述】：

我有以下代码，我想更改进度条的颜色。我无法弄清楚我做错了什么。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";

const useStyles = makeStyles({
  root: {
    width: "100%",
    barColorSecondary: "white",
  },
});

export default function LinearDeterminate() {
  const classes = useStyles();
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress === 100) {
          return 0;
        }
        const diff = Math.random() * 10;
        return Math.min(oldProgress + diff, 100);
      });
    }, 500);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className={classes.root}>
      <LinearProgress
        variant="determinate"
        value={progress}
        valueBuffer="100"
        color="secondary"
      />
    </div>
  );
}
 ``

【问题讨论】：

欢迎来到 Stack Overflow。请在此处查看how to ask 一个问题。 1.请冷静下来，不要用尖叫的语气，只要问问题就会有人帮助你； 2. 如果您想吸引相关人员到您的帖子，请确保您始终相应地标记您的问题（在这种情况下，可能#reactjs 应该这样做）； 3. 总是非常推荐提供一些研究——你尝试过什么？什么没用？你到底有什么问题？只是为我做这个通常不是进入这个网站的最佳方式。
您好。请查看stackoverflow.com/help/how-to-ask 以获取提问时的一些提示。我同意上述@Giorgi Tsiklauri 的观点，如果您让我们知道您在谈论代码的哪一部分，这也会有所帮助。

标签： reactjs material-ui jss

【解决方案1】：

问题在于您没有针对进度条。您定位栏周围的 div。

你可以在进度条中添加一个样式标签。

<LinearProgress  
    variant="determinate"
    value={progress}
    valueBuffer="100" 
    style={{color: "red"}} 
/>

或者最好是在进度条中添加一个类。

<LinearProgress  
    variant="determinate"
    value={progress}
    valueBuffer="100" 
    className={classes.root} //or whatever you call the styling. 
/>

【讨论】：