Я пытаюсь реализовать базовый ThemeProvider с помощью StyledComponents. У меня было базовое использование стилевых компонентов без проблем, однако при попытке реализовать использование <ThemeProvider /> это не одобряет того, что я пытаюсь сделать. Приложение создается с помощью gatsby, с Typescript (все еще новым для этого)
Я попытался немного отладить, включая предложения по «расширению» базы styled-components для включения вашей темы, например как этот гист . Мне сложно отследить сообщение об ошибке:
Type '{children: Element [];тема: DefaultTheme;} 'нельзя присвоить типу «Только чтение». Типы имущества «дети» несовместимы. Тип «Элемент []» нельзя назначить типу «строка |номер |ReactElement ReactElement Component)> |ноль) |(новый (реквизиты: любой) => Компонент)> |не определено. Тип 'Элемент []' нельзя назначить типу '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"
}