Categories
React Answers

How to change color of CircularProgress with React Material UI?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *