React MUI Avatar默认高度40px，如何按比例缩放并覆盖默认值？

问题场景 #

我在项目中使用MUI的Avatar组件，代码如下：

<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类中硬编码了height:40px，导致我无法实现**宽度固定180px，高度按图片比例自适应（最大不超过180px）**的需求。

解决方案 #

方案1：通过sx属性强制覆盖（推荐） #

利用MUI sx属性的高优先级，直接在sx中明确覆盖height，并确保图片自适应容器：

<Avatar
  sx={{
    width: 180,
    height: 'auto', // 覆盖默认height:40px
    maxHeight: 180,
    margin: 2,
    // 确保Avatar根元素的height生效
    '&.MuiAvatar-root': {
      height: 'auto'
    },
    // 配置内部img标签自适应，避免拉伸
    '& .MuiAvatar-img': {
      width: '100%',
      height: 'auto',
      maxHeight: '100%',
      objectFit: 'contain' // 可选：contain保持比例/cover填充容器
    }
  }}
  variant="square"
  alt=""
  src={
    global.config.baseUrl +
    "/image/logo" +
    this.state.user.userId +
    ".jpg"
  }
/>

如果默认样式优先级仍高于sx，可临时使用height: 'auto !important'（不推荐长期使用）。

方案2：自定义Styled组件 #

通过MUI的styled创建专属Avatar组件，彻底隔离默认样式：

import { styled } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';

const CustomAvatar = styled(Avatar)(({ theme }) => ({
  width: 180,
  height: 'auto',
  maxHeight: 180,
  margin: theme.spacing(2),
  '&.MuiAvatar-root': {
    height: 'auto'
  },
  '& .MuiAvatar-img': {
    width: '100%',
    height: 'auto',
    maxHeight: '100%',
    objectFit: 'contain'
  }
}));

// 使用自定义组件
<CustomAvatar
  variant="square"
  alt=""
  src={
    global.config.baseUrl +
    "/image/logo" +
    this.state.user.userId +
    ".jpg"
  }
/>

方案3：全局样式覆盖（不推荐） #

若需全局修改所有方形Avatar的样式，可在全局CSS文件中添加：

.MuiAvatar-root.MuiAvatar-square {
  height: auto !important;
}
.MuiAvatar-root.MuiAvatar-square .MuiAvatar-img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

注意：该方式会影响项目中所有同类型Avatar，需谨慎使用。

内容的提问来源于stack exchange，提问作者Black