Styling Reach UI with TypeScript and Emotion

user_8331756 0
Viewed 147

Current Behavior

I'm using Next.js with TypeScript, Reach and Emotion. I want to style the menu-button components.

const MenuItem = styled(ReachMenuItem)``;

TypeScript complains with this TypeScript error.

error TS2769: No overload matches this call.
  Overload 1 of 6, '(component: ComponentClass<Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText"> & Pick<any, string | number | symbol> & { as?: "symbol" | ... 176 more ... | undefined; } & { ...; }, any>, options?: StyledOptions<...> | undefined): CreateStyledComponent<...>', gave the following error.
    Argument of type 'ForwardRefExoticComponentWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText">>' is not assignable to parameter of type 'ComponentClass<Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText"> & Pick<any, string | number | symbol> & { as?: "symbol" | ... 176 more ... | undefined; } & { ...; }, any>'.
      Types of property 'propTypes' are incompatible.
        Type 'WeakValidationMap<PropsWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText">>> | undefined' is not assignable to type 'WeakValidationMap<Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText"> & Pick<any, string | number | symbol> & { as?: "symbol" | ... 176 more ... | undefined; } & { ...; }> | undefined'.
          Type 'WeakValidationMap<PropsWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText">>>' is not assignable to type 'WeakValidationMap<Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText"> & Pick<any, string | number | symbol> & { as?: "symbol" | ... 176 more ... | undefined; } & { ...; }>'.
            Types of property 'as' are incompatible.
              Type 'Validator<"div" | null | undefined> | undefined' is not assignable to type 'Validator<"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 859 more ... | (FunctionComponent<...> & ComponentClass<...>)> | undefined'.
                Type 'Validator<"div" | null | undefined>' is not assignable to type 'Validator<"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 859 more ... | (FunctionComponent<...> & ComponentClass<...>)>'.
                  Type '"div" | null | undefined' is not assignable to type '"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 859 more ... | (FunctionComponent<...> & ComponentClass<...>)'.
                    Type 'undefined' is not assignable to type '"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 859 more ... | (FunctionComponent<...> & ComponentClass<...>)'.
  Overload 2 of 6, '(component: ComponentType<Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText"> & Pick<any, string | number | symbol> & { as?: "symbol" | ... 176 more ... | undefined; } & { ...; }>, options?: StyledOptions<...> | undefined): CreateStyledComponent<...>', gave the following error.
    Argument of type 'ForwardRefExoticComponentWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText">>' is not assignable to parameter of type 'ComponentType<Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText"> & Pick<any, string | number | symbol> & { as?: "symbol" | ... 176 more ... | undefined; } & { ...; }>'.
      Type 'ForwardRefExoticComponentWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText">>' is not assignable to type 'FunctionComponent<Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText"> & Pick<any, string | number | symbol> & { as?: "symbol" | ... 176 more ... | undefined; } & { ...; }>'.
        Types of property 'propTypes' are incompatible.
          Type 'WeakValidationMap<PropsWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText">>> | undefined' is not assignable to type 'WeakValidationMap<Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText"> & Pick<any, string | number | symbol> & { as?: "symbol" | ... 176 more ... | undefined; } & { ...; }> | undefined'.
            Type 'WeakValidationMap<PropsWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText">>>' is not assignable to type 'WeakValidationMap<Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText"> & Pick<any, string | number | symbol> & { as?: "symbol" | ... 176 more ... | undefined; } & { ...; }>'.
  Overload 3 of 6, '(tag: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 155 more ... | "view", options?: StyledOptions<...> | undefined): CreateStyledComponent<...>', gave the following error.
    Argument of type 'ForwardRefExoticComponentWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText">>' is not assignable to parameter of type '"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 155 more ... | "view"'.
      Type 'ForwardRefExoticComponentWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "disabled" | "index" | "valueText">>' is not assignable to type '"view"'.

50 const MenuItem = styled(ReachMenuItem)``;

Expected behavior

I can style the MenuButton and its components without type errors.

Reproducible example

CodeSandbox Template

emotion typescript-typings typescript
1 Answers

I managed to hack around the problem as follows:

export const StyledMenuButton = styled(ReachMenuButton as any)<MenuButtonProps>(
  buttonStyleList
);

In other words, I am blowing away the Reach type signature, and then re-applying my own property types after styling.

user_1768860
Related