如何使用React和Typescript的情感/风格

Question

我已经将根组件从@emotion/react包装到ThemeProvider中，这使我可以访问props.theme，如下所示：

const StyledDiv = styled.div`
background-color: ${(props) => props.theme.palette.primary.main};
`;

问题：根据TS，props.theme是一个空对象-主题类型中不存在palette(但是我传递给主题提供程序的对象确实包含该属性(。如果我让TS忽略这一点，代码就会工作。

文档涵盖了这一点，它似乎是一个简单的解决方案：扩展情感主题类型

然而，我对文档的理解还不够好，无法使props.theme的Theme类型具有正确的属性。

任何能为我指明正确方向的帮助都将不胜感激！

Answer 1

添加此文件types.d.ts

import "@emotion/react";
import { IPalette } from "../your-palette";
declare module "@emotion/react" {
export interface Theme extends IPalette {}
}