样式组件不继承扩展样式

Question

我无法根据文档所说的工作原理弄清楚如何从样式组件中扩展我的样式。我和一位同事坐在一起，他们也没有成功。我的组件是这样的：

const PageBodyElement = styled.p<{ size?: 'small' | 'medium' | undefined }>`
  color: ${(props) => props.theme.colors.text};
  font-family: ${(props) => props.theme.fonts.default.family};
  font-size: ${(props) => (props.size === 'small' ? '1.4rem' : '2.1rem')};
`

interface PageBodyProps {
  children: ReactNode
  size?: 'small' | 'medium' | undefined
}

export function PageBody(props: PageBodyProps) {
  return <PageBodyElement size={props.size}>{props.children}</PageBodyElement>
}

我/我们希望能够做这样的事情：

// outside of render
const ErrorTextPageBody = styled(PageBody)`
  color: red;
`
//inside render
<ErrorTextPageBody>Hello World</ErrorTextPageBody>

我们可以调整一个 CSS 属性（在本例中为文本颜色），而不需要新组件或新参数。我没有收到任何错误，并且渲染得很好，但是，字体颜色（或任何和所有样式）都不会改变。对我来说，这似乎与样式组件网站上的操作指南完全一样，但我没有运气。

Answer 1

我想，它应该继承于

PageBodyElement

，你不这么认为吗？

这是一个例子

const ErrorTextPageBody = styled(PageBodyElement)`
  color: red;
`

因为

PageBody

本身就是一个真正的

JSX function

所以你不能继承它。您应该从另一个

styled-component

变量继承。