How to make transparent background of mui avatar in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To make transparent background of mui avatar in React js, You have to use mui avatar sx attribute and bgcolor with transparent. It will change background color as trasparent.

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

Installation

Install the following packages to make transparent background 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 make transparent background of mui avatar example.

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

App.js

import * as React from "react";
import Avatar from "@mui/material/Avatar";
import "./styles.css";

export default function BackgroundLetterAvatars() {
  return (
    <div className="avatar-container">
      <Avatar sx={{ bgcolor: "transparent", border: "2px solid" }}>G</Avatar>
    </div>
  );
}

styles.css

.avatar-container {
  display: flex;
  width: 200px;
  border: 2px solid;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  background-color: #92d47a;
}

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

Here, we are provided code sandbox links for the above program make transparent 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 👍