Search code examples
reactjstypescriptstyled-components

React styled component as a property TypeScript issue

Consider the following example:

const StyledComponent = styled.div` ... `;

interface ComponentProps {
  styledComponent: any;
}

const Component: React.FC<ComponentProps> = () => { ... };

Component.styledComponent = StyledComponent;

export default Component;

I use this to reference component's styled component in other components. Works as expected, however I keep TypeScript complaining:

Property 'styledComponent' does not exist on type 'FC<ComponentProps>'.

What am I missing here?

Solution

  • You need to define component:

    const Component: React.FC<ComponentProps> & { styledComponent: any } = () => { ... };