Question

我正在尝试学习用户界面。
我正在尝试更改加载栏的css。
我参考了文档并使用了colorPrimary类
但它没有改变。
您能告诉我如何修复它吗，以后我会自己修复
在下面提供我的代码段。
我所有的代码都在ReceipeReviewCardList.js中

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

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

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

不是：

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

希望有帮助！

Answer 2

您可以像在issue material ui项目https://github.com/mui-org/material-ui/issues/12858#issuecomment-421150158

中github的回复中那样使用示例

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 3

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

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

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

Answer 4

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 5

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

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

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

Answer 6

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

物料ui的加载杆组件的颜色变化

6 个答案: