MUI V5 styled(Typography)的variant属性不生效问题咨询

当前内联使用Typography组件variant属性的标准写法如下：

<Typography variant="h6">
  Any text
</Typography>

通过styled封装Typography时如果按下面的写法写，variant配置不会生效，需要排查原因并修正写法：

const StyledTypography = styled(Typography)(({ theme }) => ({
  variant: theme.typography.h6,
}));

<StyledTypography>
  Any text
</StyledTypography>

• variant是Typography组件的专属入参（React props），不是CSS属性。styled接收的回调返回值是纯CSS样式对象，里面写variant属于无效字段，既不会被CSS解析器识别，也不会作为props传递给内部的Typography组件。
• theme.typography.h6是MUI主题中定义的h6级别排版的CSS属性集合（包含字号、字重、行高、字间距等字段），把整个对象赋值给一个不存在的CSS属性variant，不会产生任何样式效果。
• 这种写法既没有把variant作为props传给组件，也没有把对应的排版样式注入到CSS中，自然不会生效。

根据使用场景可以选两种写法：

方案1：使用时传递variant props（推荐） #

把variant作为组件props传递，不要放在styled的样式配置里，styled里只写需要额外自定义的样式：

// styled只处理自定义附加样式
const StyledTypography = styled(Typography)(({ theme }) => ({
  // 可追加自定义样式，比如修改颜色、边距
  marginBottom: theme.spacing(2),
}));

// 使用组件时显式传入variant，和原生Typography用法一致
<StyledTypography variant="h6">
  Any text
</StyledTypography>

方案2：封装时内置h6默认样式 #

如果希望封装后的组件默认就带h6排版效果，不需要每次使用都传variant，可以直接把主题里的h6样式展开到CSS配置中，同时配置默认props保证语义化标签正确：

const StyledTypography = styled(Typography, {
  // 阻止自定义props透传到DOM节点，避免控制台无效属性警告
  shouldForwardProp: (prop) => prop !== 'variant',
})(({ theme }) => ({
  // 直接展开h6对应的所有排版样式
  ...theme.typography.h6,
  // 追加自定义样式
  color: theme.palette.text.secondary,
}));

// 配置默认variant，保证组件默认渲染为<h6>语义标签，而不是默认的<p>标签
StyledTypography.defaultProps = {
  variant: 'h6',
};

// 直接使用即可获得h6的样式和语义
<StyledTypography>
  Any text
</StyledTypography>

注意：如果只展开theme.typography.h6不配置defaultProps，组件会默认渲染为p标签，丢失标题层级语义，影响可访问性和SEO。

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