gpt4 book ai didi

reactjs - ThemeProvider/Typescript 错误 : Types of property 'children' are incompatible

转载 作者:行者123 更新时间:2023-12-05 08:11:23 25 4
gpt4 key购买 nike

我正在尝试实现一个基本的 ThemeProvider与 StyledComponents。我已经毫无问题地基本使用了 styled-components,但是,在尝试实现 <ThemeProvider /> 的使用时它不赞成我正在尝试做的事情。该应用程序是用 gatsby 和 Typescript 构建的(对此仍然是新的)

我尝试调试了一下,包括“扩展”基础的建议 styled-components包括您的主题,例如 as this gist .错误消息对我来说有点难以追查:

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

即使是 ThemeProvider 的最基本配置也只是包装一个 div 错误: enter image description here

打字:

//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"
}

最佳答案

当我使用 @0.8.0 版本的 chakra-ui/core 库时,同样的事情发生在我身上。

后来升级了release candidate版本修复了不兼容的问题。

关于reactjs - ThemeProvider/Typescript 错误 : Types of property 'children' are incompatible,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58785052/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com