如何通过 React 和 Typescript 使用情感/样式

Question

我已经将我的根组件包装在ThemeProvider其中，这样@emotion/react我就可以访问：props.theme

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

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

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

但是，我对文档的理解不够深入，无法使 的Theme类型props.theme具有正确的属性。

非常感谢任何为我指明正确方向的帮助！

Answer 1

添加此文件types.d.ts

import "@emotion/react";
import { IPalette } from "../your-palette";

declare module "@emotion/react" {
  export interface Theme extends IPalette {}
}