Issue with Headline when using within styled-components

[duranmla]

Following a structure like:

css`
    ${Headline},
    ${Text} {
        color: blue;
    }
`

On TS environments Headline will highlight error with the following error:

No overload matches this call.
  Overload 1 of 3, '(first: TemplateStringsArray | CSSObject, ...interpolations: SimpleInterpolation[]): FlattenSimpleInterpolation', gave the following error.
    Argument of type 'FC<HeadlineProps>' is not assignable to parameter of type 'SimpleInterpolation'.
      Type 'FunctionComponent<HeadlineProps>' is not assignable to type 'CSSObject'.
        Index signature is missing in type 'FunctionComponent<HeadlineProps>'.
  Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemeProps<any>>, ...interpolations: Interpolation<ThemeProps<any>>[]): FlattenInterpolation<...>', gave the following error.
    Argument of type 'FC<HeadlineProps>' is not assignable to parameter of type 'Interpolation<ThemeProps<any>>'.
      Type 'FunctionComponent<HeadlineProps>' is not assignable to type 'InterpolationFunction<ThemeProps<any>>'.
        Types of parameters 'props' and 'props' are incompatible.
          Type 'ThemeProps<any>' has no properties in common with type 'PropsWithChildren<HeadlineProps>'.
  Overload 3 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<HeadlineProps & { children?: ReactNode; }, any>>, ...interpolations: Interpolation<...>[]): FlattenInterpolation<...>', gave the following error.
    Argument of type 'FC<HeadlineProps>' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<HeadlineProps & { children?: ReactNode; }, any>>'.
      Type 'FunctionComponent<HeadlineProps>' is not assignable to type 'InterpolationFunction<ThemedStyledProps<HeadlineProps & { children?: ReactNode; }, any>>'.
        Type 'ReactElement<any, any> | null' is not assignable to type 'Interpolation<ThemedStyledProps<HeadlineProps & { children?: ReactNode; }, any>>'.
          Type 'ReactElement<any, any>' is not assignable to type 'Interpolation<ThemedStyledProps<HeadlineProps & { children?: ReactNode; }, any>>'.
            Type 'ReactElement<any, any>' is not assignable to type 'CSSObject'.
              Index signature is missing in type 'ReactElement<any, any>'.ts(2769)

It seems to be related to https://styled-components.com/docs/advanced#caveat but as it doesn't happen with other component (such as Text in this case) I expect to not happen with Headline

[lukahartwig]

This seems be related to the wrong type of Headline. Just removing React.FC here might solve this already.

That being said it is generally not a good idea to write application code that depends on a library component to be a styled-component. I agree we should fix this for consistency but we shouldn't promote this pattern IMO.

[duranmla]

Totally makes sense, I have this logic in a "Placeholder generator" we have in one of the apps. The idea is to generate a scaffold view while the content is being loaded and it takes assumptions on what to render depending on the content. But we don't have something like that in Wave (I don't even know if we should)

[lloydaf]

How do you replicate this?

[duranmla]

Create a styled-component component that has the styles described above. Like:

const Foo = styled.div`
    ${Headline},
    ${Text} {
        color: blue;
    }
`

Where Headline and Text are imported wave components