Sometimes, we want to change color and position of CircularProgress with React Material UI.

In this article, we’ll look at how to change color and position of CircularProgress with React Material UI.

How to change color and position of CircularProgress with React Material UI?

To change color and position of CircularProgress with React Material UI, we can set the color CSS property.

For instance, we write:

import React from "react";
import CircularProgress from "@material-ui/core/CircularProgress";

export default function App() {
  return (
    <div>
      <CircularProgress style={{ color: "yellow" }} />
    </div>
  );
}

We add the CircularProgress component with the style prop set to an object with the color property set to 'yellow'.

Therefore, the circular progress ring should be yellow.

Conclusion

To change color and position of CircularProgress with React Material UI, we can set the color CSS property.