Изменить цвет и положение CircularProgress?

Question

Я пытаюсь использовать CircularProgress, предоставленный Material.

Я создал этот компонент, чтобы изменить его цвет:

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

Вам не нужно переопределять 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 2

Вы можете переопределить стиль, применив css к классу .MuiCircularProgress-colorPrimary.

Попробуйте, надеюсь, это сработает.

Пример

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

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