ThemeProvider / Typescript错误：属性“子级”的类型不兼容

Question

我正在尝试使用StyledComponents实现基本的ThemeProvider。我已经基本使用过样式化组件，没有问题，但是，在尝试实现<ThemeProvider />的使用时，它不赞成我要尝试做的事情。该应用程序是使用gatsby和Typescript构建的（对此仍然是新的）

我尝试调试一下，包括建议“扩展”基础styled-components以包括您的主题，例如as this gist。 错误消息让我很难追踪：

  

类型'{children：Element [];主题：DefaultTheme； }”不可分配为“ Readonly>”类型。     属性“子级”的类型不兼容。       类型'Element []'不可分配给类型'string |编号ReactElement ReactElement组件）> | null）| （新（属性：任意）=>组件）> |未定义”。         不能将“ Element []”类型分配给“ 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>
  );
}

即使是ThemeProvider的最基本配置，它也只包装了div错误：

类型：

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

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

和我的主题：

import { DefaultTheme } from "styled-components";

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

还有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"
  }

Answer 1

规则1总是更新您的npm软件包！

Answer 2

当我使用chakra-ui/core版的@0.8.0库时，我也发生了同样的事情。

后来，升级了候选发布版本版本解决了不兼容的问题。