Styled Component Not Inheriting Extended Styles

Question

I'm unable to figure out how extend my styles from my Styled components based on how the docs say they should work. I sat with a coworker and they also had no success. My component is this:

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>
}

I/we want to be able to do something like this:

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

Where we can tweak one CSS property, in this case text color, without needing a new component or a new parameter. I get no errors and it renders just fine, however, the font color (or any and all styles) dont change. To me this seems exactly like the how-to guide on the Styled Components website says to do it but I've had no luck.

Answer 1

edit 1:

i think i get what you mean.

Maybe you can pass className to your PageBodyElement.

here's sentence from the official docs:

The styled method works perfectly on all of your own or any third-party component, 
as long as they attach the passed className prop to a DOM element.

So, with that logic, you should pass the className first like this:

interface PageBodyProps {
  children: ReactNode
  className: any // don't know the type
  size?: 'small' | 'medium' | undefined
}

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

And maybe you can extends it after that. I haven't tried it, but you can test my speculation