reactjs - 如何在情感中键入 css 主题的道具

Question

我正在使用情绪，并做出反应。

我正在定义一个主题，并尝试在我的组件中使用它。

问题是，没有输入来自 css 的道具：

const ButtonA = styled('button')`
  background-color: ${props => props.theme.color}; <= no type
`

 css={theme => ({ marginRight: theme.spacing })} <= no type

我遇到了这个问题，并尝试环顾四周。 https://github.com/emotion-js/emotion/issues/1197

我做了以下emotion.d.ts

import '@emotion/react';
import '@emotion/core';

declare global {
  namespace Emotion {
    export interface Theme {
      gap: {
        XL: string;
        L: string;
        M: string;
        S: string;
        XS: string;
      };
      colors: {
        white: string;
        background: string;
        border: string;
        success: string;
        font: string;
      };
      size: {
        button: {
          width: {
            MIN: string;
          };
          height: {
            M: string;
          };
        };
      };
    }
  }
}

declare module '@emotion/core' {
  export interface Theme {
    gap: {
      XL: string;
      L: string;
      M: string;
      S: string;
      XS: string;
    };
    colors: {
      white: string;
      background: string;
      border: string;
      success: string;
      font: string;
    };
    size: {
      button: {
        width: {
          MIN: string;
        };
        height: {
          M: string;
        };
      };
    };
  }
}

在类型根中添加

    "typeRoots": ["./src/types", "node_modules/@types"],

但仍然没有输入任何内容。我错过了什么？

标签： reactjsemotion