如何在 React 和 Typescript 中使用 emotion/styled

Question

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

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

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

文档对此进行了介绍，这似乎是一个简单的修复方法： Extend the Emotion theme type

但是我对文档的理解不够深入，无法使 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 {}
}

如何在 React 和 Typescript 中使用 emotion/styled

How to use emotion/styled with React and Typescript

emotion

typescript

reactjs