材质ui的加载栏组件颜色变化

Question

• 我正在尝试学习材料 ui。
• 我正在尝试更改加载栏的 css。
• 我参考了文档并使用了 colorPrimary 类
• 但它没有改变。
• 你能告诉我如何修复它，以便将来我自己修复它
• 在下面提供我的代码片段。
• 我所有的代码都在 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

对于 Material UI v5 (@mui)

<LinearProgress sx={{
                  backgroundColor: 'white',
                  '& .MuiLinearProgress-bar': {
                    backgroundColor: 'green'
                  }
                }}
                variant="determinate"
                value={10}/>

Answer 2

您可以使用 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>

Answer 3

你可以使用例如作为在的答复issue中material ui github项目：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);

它完美无缺。

Answer 4

这是因为你的CSS设置不正确，

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

不是：

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

希望有帮助！