更改 CircularProgress 的颜色和位置？答案

【问题标题】：Change color and position of CircularProgress?更改 CircularProgress 的颜色和位置？
【发布时间】：2020-01-13 01:28:40
【问题描述】：

我正在尝试使用 Material 提供的 CircularProgress。

我创建这个组件是为了改变它的颜色：

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { CircularProgress } from '@material-ui/core';

class ColoredCircularProgress extends Component {
render() {
    const { classes } = this.props;
    return <CircularProgress {...this.props} classes={{colorPrimary: classes.colorPrimary}}/>;
}
}

const styles = props => ({
    colorPrimary: {
        backgroundColor: '#FD8907',
    }
});

export default  withStyles(styles)(ColoredCircularProgress);

但是在我的网站上是这样的：

我的问题是：

我希望圆圈看起来是橙色的，而圆圈看起来仍然是蓝色的，并且它在后面添加了一个橙色的方形框。
它也显示在我网站的左上角。我怎样才能把它放在中间？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

要更改颜色，您可以这样做：

<CircularProgress style={{'color': 'yellow'}}/>

它适用于 Material-UI v4.x（我没有尝试使用次要版本）

【讨论】：

【解决方案2】：

您可以通过在 .MuiCircularProgress-colorPrimary 类上应用 css 来覆盖样式。

试试这个，希望这会奏效。

示例

.MuiCircularProgress-colorPrimary {
    color: green !important;
}

.MuiCircularProgress-root { 
    left: 43%; 
    position: absolute; 
    top: 44vh; 
}

【讨论】：

感谢您按照我想要的方式工作并更改了颜色。你知道如何在我的 html 中将圆居中吗？
使用这个 CSS 来居中。 .MuiCircularProgress-root { left: 43%; position: absolute; top: 44vh; }

【解决方案3】：

您不需要覆盖 css。

这是我的解决方案：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { CircularProgress } from '@material-ui/core';

const defaultSize = 50;

class ColoredCircularProgressComponent extends Component {
  render() {
    const { classes, size } = this.props;
    return <CircularProgress {...this.props} classes={classes} size={size} />;
  }
}

class ColoredCircularProgress extends Component {
  render() {
    const WithStylesComponent = withStyles(theme => ({
      colorPrimary: {
        color: this.props.foreColor
      },
      root: {
        top: `calc(50% - ${this.props.size / 2}px)`,
        left: `calc(50% - ${this.props.size / 2}px)`,
        position: 'absolute'
      }
    }))(ColoredCircularProgressComponent);
    return <WithStylesComponent {...this.props} />;
  }
}

ColoredCircularProgress.propTypes = {
  classes: PropTypes.object,
  size: PropTypes.number,
  foreColor: PropTypes.string
};
ColoredCircularProgress.defaultProps = {
  size: defaultSize,
  foreColor: 'green'
};

export default ColoredCircularProgress;

【讨论】：

我包装了原始组件以接受大小并将组件正好放在屏幕的中心。

【解决方案4】：

将此添加到您的主题中的覆盖。使颜色全局变化。

    MuiCircularProgress:{circle:{color:"green"},}

【讨论】：

这应该是公认的答案！