React项目中如何无需重复Tailwind样式统一设置子Typography组件样式

父级样式不生效的核心原因是：py-2、px-15、rounded-5 这类盒模型相关的CSS属性本身不具备继承性，不会自动传递给子组件；同时自定义的Typography组件默认也不会合并父容器的类名到自身的根元素类名中。

以下是几种可落地的实现方案：

方案1：抽离公共样式常量（最简便，适合局部复用） #

直接把重复的样式定义为变量，多个组件复用即可：

// 抽离公共样式
const commonTypographyClasses = "py-2 px-15 rounded-5";

// 组件中使用
<div className="parent">
    <Typography variant='Title' text={Company} classes={commonTypographyClasses} />
    <Typography variant='SubTitle' text={City} classes={commonTypographyClasses} />
</div>

方案2：父级使用Tailwind子选择器（适合不想修改子组件的场景） #

如果不想给每个Typography传类，可以在父容器用Tailwind的任意值子选择器，统一控制所有子Typography的样式，只要匹配Typography渲染后的根标签即可（示例假设Typography根标签为div，实际可以换成p/span等对应标签）：

<div className="parent [&>div]:py-2 [&>div]:px-15 [&>div]:rounded-5">
    <Typography variant='Title' text={Company} />
    <Typography variant='SubTitle' text={City} />
</div>

方案3：封装自定义公共组件（适合全项目大范围复用） #

如果多个页面都需要用到带该样式的Typography，可以封装一层自定义组件内置公共样式：

// 封装组件
const StyledTypography = ({variant, text, ...rest}) => {
  return <Typography variant={variant} text={text} classes="py-2 px-15 rounded-5" {...rest} />
}

// 业务中直接使用
<div className="parent">
    <StyledTypography variant='Title' text={Company} />
    <StyledTypography variant='SubTitle' text={City} />
</div>

方案4：自定义Tailwind组件类（适合样式规则复杂、多处复用的场景） #

在项目的Tailwind全局CSS文件中自定义组件类：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .typography-base {
    @apply py-2 px-15 rounded-5;
  }
}

之后直接在组件中使用即可：

<Typography variant='Title' text={Company} classes="typography-base" />

内容的提问来源于stack exchange，提问作者Python-Pirate