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

【问题标题】：color change for the loading bar component of material ui材质ui的加载栏组件的颜色变化
【发布时间】：2018-12-22 00:21:29
【问题描述】：

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

【问题讨论】：

标签： javascript css reactjs redux material-ui

【解决方案1】：

您可以使用material uigithub项目中issue的回复中的示例：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);

效果很好。

【讨论】：

【解决方案2】：

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

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

不是：

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

希望对您有所帮助！

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我确实这样做了，创建了自己的主题

     import {createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
        
           
           const theme = createMuiTheme({
              palette: {
                 secondary: {
                     main: '#42baf5'
                 }
              }
            })
     

          <MuiThemeProvider theme={theme}>
            <LinearProgress color="secondary"/> 
          </MuiThemeProvider>

【讨论】：

【解决方案5】：

我偶然发现了一个简单的解决方法，看起来并不太像 hack：

<LinearProgress
      className="VolumeBar"
      variant="determinate"
      value={volume}
    />
.VolumeBar > * { background-color:green; }
.VolumeBar{background-color:gray ;}

第一条规则使进度显示为绿色（完成部分）。第二条规则处理未完成的部分。

【讨论】：

【解决方案6】：

const BorderLinearProgress = withStyles((theme: Theme) =>
  createStyles({
    root: {
        width: '95%',
        height: 10,
        borderRadius: 5,
        marginTop: 8,
        marginBottom: 20
    },
    colorPrimary: {
        backgroundColor: Liquidity.colors.main.pink,
    },
    bar: {
        borderRadius: 5,
        backgroundColor: Liquidity.colors.main.yellow,
    },
  }),
)(LinearProgress);

【讨论】：

【解决方案7】：

这对我有用（Material ui 版本 4）：

progressbar: {
  background: 'yellow',

  '& .MuiLinearProgress-bar': {
    backgroundColor: theme.palette.success.main,
  },
},

然后

<LinearProgress
            className={classes.progressbar}
            variant="determinate"
            value={30}
/>

【讨论】：