Types missing after wrapping with styled-components

[tibotiber]

Hi, I'd like to wrap a ReactSVG with some custom styles using styled-components, I'm using Typescript and although this works, I'm loosing the types on props like afterInjection. Used straight the types are there, through styled-components they're gone. This is not happening with components from other libs. I'm not sure why but the type that's showing is const SVG: StyledComponent<typeof ReactSVG, DefaultTheme, SVGProps, never> , the typeof part is particular.

Any idea what might be happening? Thanks.

import React, { FC } from 'react'
import { ReactSVG } from 'react-svg'
import styled from 'styled-components'

interface SVGProps {
  $filled?: boolean
}
const SVG = styled(ReactSVG)<SVGProps>`
  & div svg g path {
    fill: ${(props) => (props.$filled ? 'currentColor' : 'none')};
  }
`

interface IconProps {
  src: string
  filled?: boolean
  onClick?: React.MouseEventHandler<HTMLButtonElement>
}
const Icon: FC<IconProps> = ({ src, filled, ...props }) => {
  return (
    <SVG
      src={src}
      afterInjection={(error) => {
        error && console.error('Error injecting svg icon', error)
      }}
      beforeInjection={(svg) => {
        if (svg.getElementsByTagName('title').length > 0) {
          svg.removeChild(svg.getElementsByTagName('title')[0])
        }
      }}
      $filled={filled}
      {...props}
    />
  )
}

export default Icon

[tanem]

Hey @tibotiber, sorry for the late reply. Hmm, this is a tricky one.

I think the typeof makes sense as ReactSVG is a class component. If I run another example using a simpler class component, the same thing happens and everything works ok.

Perhaps there's an issue with how the types are being generated for this library, will post back once I know more.