typescript - 使用 TypeScript 和 Emotion 设计 Reach UI

Question

当前行为

我将 Next.js 与 TypeScript、Reach 和 Emotion 结合使用。我想设置 menu-button 组件的样式。

const MenuItem = styled(ReachMenuItem)``;

TypeScript 提示这个 TypeScript 错误。

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)``;

预期行为

我可以设置 MenuButton 及其组件的样式而不会出现类型错误。

可重现的例子

CodeSandbox Template

Answer 1

我设法解决了这个问题，如下所示:

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

换句话说，我吹走了 Reach 类型签名，然后在样式化后重新应用我自己的属性类型。