How to make mui avatar with border in react js?
March 29, 2023Hi Friends π,
Welcome To aGuideHub!
To make mui avatar with border in React js, You have to use mui avatar sx
attribute and border
with 2px solid #AE58EF
. It will add border color on mui avatar.
Today, I am going to show you, how to make mui avatar with border in react js.
Installation
Install the following packages to mui avatar with border in react js.
npm
npm install @mui/material @emotion/react @emotion/styled
yarn
yarn add @mui/material @emotion/react @emotion/styled
MUI material mui avatar with border example.
The below code is an example of add border on mui avatar using this code border
.
App.js
import * as React from "react";
import Avatar from "@mui/material/Avatar";
export default function BackgroundLetterAvatars() {
return (
<div>
<Avatar sx={{ border: "2px solid #AE58EF" }}>G</Avatar>
</div>
);
}
In the above code example, I have used the @mui/material
component and make border on mui avatar.
Here, we are provided code sandbox links for the above program make border on mui avatar. Then you can use whenever you want and do the changes as per your requirements.
Letβs check the output.
All the best π