Using withTheme with styled-components and react-router-dom throws type error

[sunknudsen]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The following code should not throw a type error:

import { Link as ReactRouterDomLink } from "react-router-dom";
import { Theme, withTheme } from "@material-ui/core/styles";
import styled from "styled-components";

interface LinkProps {
  theme: Theme;
}

const Link = styled(ReactRouterDomLink)`
  color: ${(props: LinkProps) => props.theme.palette.primary.light};
`;

export default withTheme()(Link);

The above code runs flawlessly using // @ts-ignore

// @ts-ignore
export default withTheme()(Link);

Current Behavior 😯

A type error is thrown on Visual Studio Code 1.30.1 (somehow it isn't thrown on Code
Sandbox, any ideas?):

vs

Here's the whole type error:

Type error: Argument of type 'StyledComponent<typeof Link, any, LinkProps, never>' is not assignable to parameter of type 'ComponentType<ConsistentWith<Pick<Pick<LinkProps & RefAttributes & LinkProps, "title" | "color" | "hidden" | "style" | "to" | "replace" | "innerRef" | "download" | "href" | "hrefLang" | "media" | ... 252 more ... | "key"> & Partial<...>, "title" | ... 261 more ... | "key"> & { ...; } & { ...; }, WithTheme>>'.
Type 'StyledComponent<typeof Link, any, LinkProps, never>' is not assignable to type 'FunctionComponent<ConsistentWith<Pick<Pick<LinkProps & RefAttributes & LinkProps, "title"| "color" | "hidden" | "style" | "to" | "replace" | "innerRef" | "download" | "href" | "hrefLang" | "media" | ... 252 more ... | "key"> & Partial<...>, "title" | ... 261 more ... | "key"> & { ...; } & { ...; }, WithTheme>>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'ConsistentWith<Pick<Pick<LinkProps & RefAttributes & LinkProps, "title" |"color" | "hidden" | "style" | "to" | "replace" | "innerRef" | "download" | "href" | "hrefLang" | "media" | ... 252 more ... | "key"> & Partial<...>, "title" | ... 261 more ... | "key"> & { ...; } & { ...; }, WithTheme> & { ...; }' is not assignable to type 'Pick<Pick<LinkProps & RefAttributes & LinkProps, "title" | "color" | "hidden" | "style" | "to" | "replace" | "innerRef" | "download" | "href" | "hrefLang" | "media" | ... 252 more ... | "key"> &Partial<...>, "title" | ... 261 more ... | "key"> & { ...; } & { ...; }'.
Type 'ConsistentWith<Pick<Pick<LinkProps & RefAttributes & LinkProps, "title"| "color" | "hidden" | "style" | "to" | "replace" | "innerRef" | "download" | "href" | "hrefLang" | "media" | ... 252 more ... | "key"> & Partial<...>, "title" | ... 261 more ... | "key"> & { ...; } & { ...; }, WithTheme> & { ...; }' is not assignable to type 'Pick<Pick<LinkProps & RefAttributes & LinkProps, "title" | "color" | "hidden" | "style" | "to" | "replace" | "innerRef" | "download" | "href" | "hrefLang" | "media" | ... 252 more ... | "key">& Partial<...>, "title" | ... 261 more ... | "key">'.
Types of property 'innerRef' are incompatible.
Type '((instance: any) => void) | RefObject | null | undefined' is not assignable to type '((node: HTMLAnchorElement | null) => void) | undefined'.
Type 'null' is not assignable to type '((node: HTMLAnchorElement | null) => void) | undefined'. TS2345

Steps to Reproduce 🕹

• Download code from https://codesandbox.io/s/w2n662oypw
• Unzip create-react-app-with-typescript.zip
• cd create-react-app-with-typescript
• npm install
• Open project in Visual Studio Code

If all goes as planned, you will see the thrown error.

Context 🔦

Trying to get the project to compile without errors on Visual Studio Code.

Your Environment 🌎

Please see https://codesandbox.io/s/w2n662oypw

[eps1lon]

PR for fix is open.

You should be able to hotfix this by applying the following local patch to @material-ui/core/styles/withTheme.d.ts:

--- @material-ui/core/styles/withTheme.d.ts
+++ @material-ui/core/styles/withTheme.d.ts
@@ -3,7 +3,10 @@ import { PropInjector } from '..';
 
 export interface WithTheme {
   theme: Theme;
+}
+
+export interface ThemedComponentProps extends Partial<WithTheme> {
   innerRef?: React.Ref<any> | React.RefObject<any>;
 }
 
-export default function withTheme(): PropInjector<WithTheme, Partial<WithTheme>>;
+export default function withTheme(): PropInjector<WithTheme, ThemedComponentProps>;

I'm just leaving this here to verify that this was indeed the issue. You don't have to permanently patch our code.

[sunknudsen]

Thanks for the fix @eps1lon. I confirm the patch works!