使用styled-components无法为@mui Avatar组件设置样式

Material-UI 的组件（比如 Avatar）默认自带的样式优先级较高，会覆盖 styled-components 生成的自定义样式，这就是你遇到的问题所在。下面是两种可行的解决方式：

方式一：提升样式优先级（推荐） #

使用双重 & 选择器提高样式权重，覆盖 Material-UI 的默认样式：

const UserAvatar = styled(Avatar)`
  && {
    height: 60px;
  }
`;

方式二：通过组件原生属性设置 #

Avatar 本身支持 height 原生属性，可借助 styled-components 的 attrs 方法直接传递：

const UserAvatar = styled(Avatar).attrs({
  height: 60
})``;

额外注意事项 #

• 你代码中给 UserAvatar 添加的 className="override" 没有对应的样式定义，可直接移除，避免不必要的干扰。
• 你的 IconsContainer 样式定义不完整，建议补全（比如添加布局样式）：

const IconsContainer = styled.div`
  display: flex;
  gap: 12px;
`;

内容的提问来源于stack exchange，提问作者kaan.west