如何使用 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 忽略这一点，代码就可以工作。

文档涵盖了这一点，并且看起来很容易解决： Extend the Emotion theme type

但是，我对文档的理解不足以使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 {}
}