ThemeProvider/Typescript error: Types of property 'children' are incompatible

Question

I am trying to implement a basic ThemeProvider with StyledComponents. I have had basic use of styled-components without a problem, however, upon trying to implement the use of the <ThemeProvider /> it does not approve of what I am trying to do. The app is being built with gatsby, with Typescript (still new to this)

I have tried to debug a bit, including suggestions to "extend" the base styled-components to include your theme, such as this gist. The error message is a bit hard for me to trace down:

Type '{ children: Element[]; theme: DefaultTheme; }' is not assignable to type 'Readonly>'. Types of property 'children' are incompatible. Type 'Element[]' is not assignable to type 'string | number | ReactElement ReactElement Component)> | null) | (new (props: any) => Component)> | undefined'. Type 'Element[]' is not assignable to type 'string'.ts(2322)

// index.tsx

import { ThemeProvider } from "styled-components";
import { theme } from "./theme";

export default () => {
  return (
    <ThemeProvider theme={theme}>
      <Global />
      <Comp1 />
      <Comp2 />
      <Comp3 />
    </ThemeProvider>
  );
}

Even the most basic config of the ThemeProvider wrapping just a div errors:

Typings:

//styled.d.ts
import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    colors: {
      purple1: string;
      yellow1: string;
      blue1: string;
    };
  }
}

and my theme:

import { DefaultTheme } from "styled-components";

export const theme: DefaultTheme = {
  colors: {
    purple1: "#9b91f2",
    yellow1: "#f2f0d5",
    blue1: "#1c4d8c"
  }
};

And package-json:

"dependencies": {
    "babel-plugin-styled-components": "^1.10.6",
    "gatsby": "^2.17.4",
    "gatsby-plugin-styled-components": "^3.1.11",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "styled-components": "^4.4.0"
  },
  "devDependencies": {
    "@types/styled-components": "^4.1.19",
    "gatsby-plugin-tslint": "0.0.2",
    "gatsby-plugin-typescript": "^2.1.15",
    "tslint": "^5.20.0",
    "tslint-loader": "^3.5.4",
    "tslint-react": "^4.1.0",
    "typescript": "^3.6.4"
  }

Try change @types/styled-components to the latest version @4.4.0 the typings are wrong — Shanon Jackson

Golamrabbi Azad Golamrabbi Azad · Accepted Answer · 2020-10-03T16:04:46

The same thing happened to me when I was using chakra-ui/core library at version @0.8.0.

Later, upgraded the release candidate version fixed the incompatible issue.

ThemeProvider/Typescript error: Types of property 'children' are incompatible

2 Answers