我正在尝试使用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"
}