Change color and position of CircularProgress?

Question

I'm trying to use CircularProgress provided by Material.

I created this component in order to change its color:

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

However on my site it looks like this:

My questions are :

1. I want the circle to look orange and instead the circle looks still blue and it adds a square orange box behind.

2. It also displays at the top left corner of my site. How can I place it right in the center?

Answer 1

To change the color you can simple do this:

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

It works for Material-UI v4.x (I didn't try with minor versions)

Answer 2

You can override the style by applying css on .MuiCircularProgress-colorPrimary class.

Try this, hope this will work.

Example

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

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