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

问题描述

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

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

解决方法

问题是您没有定位进度条。您将广告定位到围绕酒吧的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. 
/>