solid-styled-components icon indicating copy to clipboard operation
solid-styled-components copied to clipboard

Typescript error referencing another selector but it works

Open dominictobias opened this issue 2 years ago • 0 comments

Hi, when referencing another styled component like this:

const Parent = styled('div')``

const Child = styled('div')`
  ${Parent}.active & {
    background: blue;
  }
`

It works but generates the following TS error:

Screenshot 2023-02-13 at 19 22 47
Argument of type 'Component<HTMLAttributes<HTMLDivElement> & AsProps> & { class: (props: HTMLAttributes<HTMLDivElement> & AsProps) => string; }' is not assignable to parameter of type 'string | TagStyleGenerator<HTMLAttributes<HTMLDivElement> & AsProps & ThemeProp>'.
  Type 'Component<HTMLAttributes<HTMLDivElement> & AsProps> & { class: (props: HTMLAttributes<HTMLDivElement> & AsProps) => string; }' is not assignable to type 'TagStyleGenerator<HTMLAttributes<HTMLDivElement> & AsProps & ThemeProp>'.
    Type 'Element' is not assignable to type 'string | number | undefined'.
      Type 'null' is not assignable to type 'string | number | undefined'.ts(2345)

Is this not the correct way, or can this TS error be ignored? Thanks

dominictobias avatar Feb 13 '23 19:02 dominictobias