reactjs - 如何在 React 和 Typescript 中使用情感/风格

Question

我已经将我的根组件包裹在 ThemeProvider 中来自 @emotion/react这使我可以访问 props.theme像这样:

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

问题: props.theme根据 TS - palette 是一个空对象不存在于 Theme 类型(但是我传递给主题提供程序的对象确实包含该属性)。如果我让 TS 忽略这一点，代码就可以工作。
文档涵盖了这一点，似乎很容易解决:
Extend the Emotion theme type
但是，我不太了解文档，无法制作 Theme props.theme 的类型有正确的属性。
非常感谢为我指明正确方向的任何帮助!

Answer 1

添加此文件 类型.d.ts

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

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