How to change background color of mui avatar in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To change background color of mui avatar in React js, You have to use mui avatar sx attribute and bgcolor. It will change background color based what hex code you have provided.

Today, I am going to show you, how to change background color of mui avatar in react js.

Installation

Install the following packages to change background color of mui avatar in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

MUI material change background color of mui avatar example.

The below code is an example of change background color of mui avatar using this code bgcolor.

App.js

import * as React from "react";
import Avatar from "@mui/material/Avatar";
import Stack from "@mui/material/Stack";

function stringAvatar(name, color) {
  return {
    sx: {
      bgcolor: color
    },
    children: `${name[0]}`
  };
}

export default function BackgroundLetterAvatars() {
  return (
    <Stack direction="row" spacing={2}>
      <Avatar {...stringAvatar("Guide Hub", "#673ABE")} />
      <Avatar {...stringAvatar("Infinit Bility", "#377BCD")} />
      <Avatar {...stringAvatar("SortoutCode ", "#FEDACE")} />
    </Stack>
  );
}

In the above code example, I have used the @mui/material component and change background color of mui avatar.

Here, we are provided code sandbox links for the above program change background color of mui avatar. Then you can use whenever you want and do the changes as per your requirements.

Let’s check the output.

Try it Yourself

All the best 👍