使用 TypeScript 进行情感主题：“对象”类型上不存在属性“X”。TS(2339)

Question

我找不到让情感主题与 TypeScript 一起使用的方法。

import React from "react";
import { ThemeProvider } from "emotion-theming";
import styled from "@emotion/styled";

const theme = {
  colors: {
    gray: "#ccc",
  },
};

const MyComponent = styled.div((props) => ({
  color: props.theme.colors.gray,
}));

const App = () => (
  <ThemeProvider theme={theme}>
    <MyComponent />
  </ThemeProvider>
);

export default App;

文档说：“默认情况下，props.theme 有任何类型注释并且工作时没有任何错误”。但我有一个props.theme.colors.gray：属性“颜色”在类型“对象”上不存在。ts（2339）

我在这里错过了什么吗？

Answer 1

情感 11 简化了这一点。

emotion.d.ts在文件中定义您的主题

   declare module '@emotion/react' {
      export interface Theme {
        colors : {
          primary: string;
          secondary: string;
        };
      }
    }

这为 Emotion 中的空接口提供了覆盖Theme。

https://emotion.sh/docs/typescript#define-a-theme