Styled Component无法继承扩展样式的问题求助

问题根源 #

你当前用styled(PageBody)扩展样式，但PageBody是封装的普通React组件，并非直接的Styled Components实例。styled()方法仅能直接处理原生HTML元素或Styled Components生成的组件，无法自动穿透普通组件修改内部样式元素。

两种解决办法 #

方法一：直接扩展底层的Styled组件

直接基于真正的styled组件PageBodyElement创建扩展组件：

// 直接扩展PageBodyElement而非PageBody
const ErrorTextPageBody = styled(PageBodyElement)`
  color: red;
`

// 使用方式不变
<ErrorTextPageBody size="medium">Hello World</ErrorTextPageBody>

方法二：给自定义组件传递className属性

若要保持扩展PageBody的写法，需修改PageBody组件，让它接收并传递className给内部的styled元素：

// 修改Props接口，添加className属性
interface PageBodyProps {
  children: ReactNode
  size?: 'small' | 'medium' | undefined
  className?: string
}

export function PageBody(props: PageBodyProps) {
  // 将className传递给内部的PageBodyElement
  return <PageBodyElement size={props.size} className={props.className}>{props.children}</PageBodyElement>
}

// 现在可正常扩展PageBody
const ErrorTextPageBody = styled(PageBody)`
  color: red;
`

补充说明 #

方法二的原理是：用styled()包裹普通React组件时，Styled Components会自动生成包含新样式的className，并将其作为props传递给你的组件。只要组件把这个className转发给内部的styled元素，新样式就会和原样式合并生效。

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