如何在MUI v5中将Avatar组件嵌套在<p>容器内

问题根源是Material-UI的Avatar组件默认渲染为<div>块级元素，而HTML规范中<p>标签不能包含块级后代元素，因此触发警告。要解决这个问题，只需将Avatar的根容器替换为<span>行内元素，有两种实现方式：

方式1：使用组件时指定component属性 #

在嵌套到<p>标签内的地方，给StyledTutorialAvatar传递component="span"属性，直接覆盖根元素类型：

<p>
  示例文本<StyledTutorialAvatar component="span" />更多文本
</p>

方式2：修改Styled组件定义，默认使用<span> #

如果希望所有场景下StyledTutorialAvatar都默认渲染为<span>，可以通过styled的.attrs()方法给底层Avatar设置默认props：

export const StyledTutorialAvatar = styled(Avatar).attrs({
  component: 'span',
})(({ theme }) => ({
  margin: '0 5px',
  height: 30,
  width: 30,
  padding: 5,
  fontWeight: 600,
  color: theme.palette.grey[theme.palette.mode === 'light' ? 50 : 800],
  backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 800 : 50],
  fontSize: 20,
  display: 'inline-flex',
}));

这样修改后，StyledTutorialAvatar的根元素会变成<span>，完全符合<p>标签的嵌套规则，警告会自动消失。

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