如何在Styled Components中为多级别重复标题组件实现DRY开发原则

首先明确两个核心结论：

1. 你尝试的styled(基础组件) 语法本身是合法可行的，但styled.element 是错误的写法——styled-components没有提供动态标签占位的原生语法，动态渲染HTML元素的需求请通过内置的as属性实现。
2. 针对「所有标题共用字体、颜色，仅尺寸有差异」的场景，最适合的实现是公共样式片段复用+工厂函数批量生成组件，完全不需要多层组件嵌套。

方案1：工厂函数批量生成（零重构成本，适配你现有代码） #

这个方案可以完全保留你现有的引入、调用习惯，只需要把重复的公共样式抽离，几行代码生成所有标题组件，后续改公共样式只需要改一处。

• 第一步：抽离所有标题共用的样式片段

// 从styled-components导入css辅助函数，用于复用样式片段
import styled, { css } from 'styled-components'

// 所有标题通用的基础样式，后续要调整字体、颜色、行高等只需要改这里
const baseTitleStyle = css`
  font-family: 'Open Sans';
  color: ${({ theme }) => theme.colors.color03};
  // 可继续添加所有标题统一的样式，比如字重、margin等
`

• 第二步：写工厂函数，接收HTML标签名和对应的尺寸key，自动生成对应组件

// 批量生成标题组件的工厂
const createTitle = (element, sizeKey) => styled(element)`
  ${baseTitleStyle}
  font-size: ${({ theme }) => theme.desktopSizes[sizeKey]};
  @media only screen and (max-width: ${({ theme }) => theme.breakpoints.md}) {
    font-size: ${({ theme }) => theme.mobileSizes[sizeKey]};
  }
`

• 第三步：直接导出所有层级的标题组件，不需要重复写公共样式

export const H1 = createTitle('h1', 'h1')
export const H2 = createTitle('h2', 'h2')
export const H3 = createTitle('h3', 'h3')
export const H4 = createTitle('h4', 'h4')
export const H5 = createTitle('h5', 'h5')

这种实现的优势：

• 没有多余的组件继承层级，不会造成多层className嵌套的冗余
• 现有使用逻辑完全不用改，依然保持import { H1, H2 } from '主题路径'、<H1>标题内容</H1>的调用方式
• 公共样式统一维护，后续调整全站标题风格不需要逐个改H1-H5的定义

方案2：通用标题组件+as属性动态渲染（灵活适配动态标签需求） #

如果你需要一个可以动态传入渲染元素的通用标题组件，正确的实现是基于固定基础组件，通过官方内置的as属性切换渲染的HTML标签，不需要自己写动态标签逻辑：

// 通用基础标题组件
export const BaseTitle = styled.h1`
  ${baseTitleStyle} // 复用公共样式
`

使用时直接通过as属性指定要渲染的标签，同时传入对应的尺寸即可：

{/* 渲染h2标签 */}
<BaseTitle as="h2" style={{ fontSize: '2rem' }}>二级标题</BaseTitle>
{/* 渲染h3标签 */}
<BaseTitle as="h3" style={{ fontSize: '1.5rem' }}>三级标题</BaseTitle>

如果需要固定对应层级的尺寸，也可以在基础组件上做预设继承，本质和方案1的逻辑一致：

export const H1 = styled(BaseTitle)`
  font-size: ${({ theme }) => theme.desktopSizes.h1};
  @media only screen and (max-width: ${({ theme }) => theme.breakpoints.md}) {
    font-size: ${({ theme }) => theme.mobileSizes.h1};
  }
`

实现注意事项 #

• 避免无意义的多层styled嵌套：只有当你在某个特定业务场景下需要单独覆盖某个标题的样式时，再使用styled(已有组件)的写法，日常抽公共样式尽量用css片段复用、工厂函数的方式，减少不必要的组件层级，提升渲染性能
• 不要把差异化的尺寸写进公共基础样式：把所有标题完全一致的样式抽成公共片段，把仅和层级相关的尺寸做参数化传入，避免后续继承时需要覆盖公共样式的麻烦
• 动态渲染元素统一使用as属性，不要尝试拼凑动态的styled语法，这是官方标准支持的能力，兼容性最好、逻辑最清晰

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ