React styled component as a property TypeScript issue-CodePudding

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?

CodePudding user response：

You need to define component:

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