如何解决如何更改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.
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。