I am working with a MUI Avatar component in my project:
<Avatar
sx={{ width: 180, height: "auto", maxHeight: 180, margin: 2 }}
variant="square"
alt={""}
src={
global.config.baseUrl +
"/image/logo" +
this.state.user.userId +
".jpg"
}
/>
when rendered, it creates the following HTML:
<div class="MuiAvatar-root MuiAvatar-square css-eqjmj4">
<img alt="" src="/image/logo1.jpg" class="MuiAvatar-img css-1hy9t21">
</div>
and is styled using the following CSS class:
.css-eqjmj4 {
position: relative;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
flex-shrink: 0;
height: 40px;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 1.25rem;
line-height: 1;
border-radius: 0px;
overflow: hidden;
user-select: none;
width: 180px;
max-height: 180px;
margin: 16px;
}
I need to ensure that the width remains at 180px while allowing the height to scale proportionately (up to a maximum height of 180px)
Currently, the CSS class enforces a height of 40px; which I want to override. How can I achieve this?