材质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 github项目中的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);

它工作完美。

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

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

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

不是：

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

希望对您有所帮助！

Answer 4

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

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

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

Answer 5

我偶然发现了一个简单的解决方法，它似乎并没有太多的技巧：

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

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

Answer 6

如果你想用 sx 覆盖：

 sx={{
                    '& .MuiLinearProgress-bar1Determinate': {
                        backgroundColor: 'red',
                    }
}}

主栏的颜色设置为背景颜色，而不是颜色

Answer 7

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

Answer 8

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

progressbar: {
  background: 'yellow',

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

接着

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

Answer 9

这对我有用！ 首先给LinearProgress组件设置一个 className

<LinearProgress
    className="custom-class"
    variant="determinate"
    value={MyValue}
/>

然后从您附加的 css 文件中对其进行样式设置，如下所示：

.custom-class > * { background-color:green !important; }
.custom-class{background-color:gray !important;}

使用!important标记是优先覆盖原始颜色的。

Answer 10

• 风格： progress: { color: 'red' },

• 组件： <LinearProgress color="inherit" className={classes.progress} />