更改 CircularProgress 的颜色和位置？

Question

我正在尝试使用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);

但是在我的网站上它看起来像这样：

我的问题是：

1. 我希望圆圈看起来是橙色的，但圆圈看起来仍然是蓝色的，并且它在后面添加了一个橙色的方形框。

2. 它也显示在我网站的左上角。我怎样才能把它放在正中央？

Answer 1

要更改颜色，您可以简单地执行以下操作：

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

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

Answer 2

您可以通过在

.MuiCircularProgress-colorPrimary

类上应用 css 来覆盖样式。

尝试一下，希望这会起作用。

示例

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

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

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

Answer 4

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

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

Answer 5

旧帖子，但对于任何有同样问题的人：

至少在 MUI v6 中你可以使用

<CircularProgress color="common.white" />

此处描述的颜色值之一： https://mui.com/material-ui/customization/default-theme/