Ask questionsTypescript support for extended Styled Components

Hi, I've been using the macro to extend components and have recently started also using Typescript and I'm getting errors from the tsc when using extended components:

So, this works in regular JSX:

const PinkButton = tw(Button)`bg-pink`;

but when it becomes TSX then I get this error:

Argument of type 'FunctionComponent<Props>' is not assignable to parameter of type 'TemplateStringsArray'.

The workaround for this is to import styled and call it like this:

const PinkButton = styled(Button)`${tw`bg-pink`}`;

Which is great for now but everywhere else I'm using tw.div etc and would like to be able to consistently use tw instead of having to import styled when extending components. fixed other issues but there's still this case.


Answer questions A-Shleifman

As a temporary solution we can declare a modified module:

// twin.d.ts

import { ComponentType } from 'react';
import { TwFn, TemplateFn } from 'twin.macro';

declare module 'twin.macro' {
  type TwComponentWrapper = <T extends ComponentType<any>>(component: T) => TemplateFn<T>;
  const tw: TwFn & TwComponentMap & TwComponentWrapper;
  export = tw;

@ben-rogerson, how about updating the type with this?

Github User Rank List