更改 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

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

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

例子

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

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