React MUI Avatar div 高度默认为静态值（40px）

Question

我的页面上有一个 MUI 头像元素：

<Avatar sx={{ width: 180, height:'auto', maxHeight: 180, margin: 2 }} variant="square"
                                alt={""}
                                src={global.config.baseUrl + '/image/logo' + this.state.user.userId + '.jpg'} />

这会生成以下 DOM：

<div class="MuiAvatar-root MuiAvatar-square css-eqjmj4">
    <img alt="" src="/image/logo1.jpg" class="MuiAvatar-img css-1hy9t21">
</div>

具有以下 css 类：

.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;
}

我希望将宽度设置为正好 180 像素，高度按比例缩放（最大高度为 180 像素）

由于某种原因，css 类将高度硬编码为

height: 40px;

我怎样才能覆盖它？

Answer 1

看起来

square

的

Avatar

变体只是场景背后的

height

和

width

的 CSS，这并不是很直观。

我的建议是——自己添加

aspect-ratio

的样式（所有现代浏览器都支持），值为

1 / 1

，这样代码看起来就像这样。

<Avatar
  sx={{
    width: 180,
    aspectRatio: "1 / 1", // <-- look here
    height: "auto",
    maxHeight: 180,
    margin: 2,
  }}
  variant="square"
  src="/static/images/avatar/3.jpg"
/>

当您设置比它大的

max-height

时，这将与

width

一起使用。

这是一个工作示例