ReactJs Typescript, Emotion Js 使用主题类型

Question

你好我是打字稿的新手，但我有以下关于emotionJs的useTheme的问题 我有这个代码：

const GlobalStyle: React.FC = (props) => {
  const Theme = useTheme();
  return (
    <Global
      styles={css`
        @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
        @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

        body > #emasa > div {
          height: 100vh;
        }
        * {
          padding: 0;
          margin: 0;
        }
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        *:focus {
          outline: 0;
          outline: none;
        }
        a {
          text-decoration: none;
          color: inherit;
          cursor: pointer;
        }
        button {
          background-color: transparent;
          color: inherit;
          border-width: 0;
          padding: 0;
          cursor: pointer;
        }
        figure {
          margin: 0;
        }
        input::-moz-focus-inner {
          border: 0;
          padding: 0;
          margin: 0;
        }
        ul,
        ol,
        dd {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          margin: 0;
          font-size: inherit;
          font-weight: inherit;
        }
        p {
          margin: 0;
        }
        cite {
          font-style: normal;
        }
        fieldset {
          border-width: 0;
          padding: 0;
          margin: 0;
        }

        body {
          background: ${Theme.colors.background};
          color: ${Theme.colors.text};
          transition-duration: 0.4s;
          transition-property: background-color, color;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
            'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
            sans-serif;
        }
      `}
    />
  );
};

但我明白了：

对象的类型为“未知”.ts(2571)

所以我在使用 useTheme 来为我的 const 主题使用哪种类型时遇到问题

我知道问题在于声明主题的类型，但我对解决这个问题的正确方法有疑问。

Answer 1

这就是我修复它的方法：

1. 按照here 的指示创建一个emotion.d.ts 文件。就我而言，内容是这样的：

    import '@emotion/react';
    
    declare module '@emotion/react' {
      export interface Theme {
         colors: {
           blue: string[];
           gray: string[];
           primary: string;
           secondary: string;
           background: string;
           white: string;
         };
         space: string[];
         border: { 
           radius: string; 
         };
      }
    }

1. 确保文件位于 Typescript 包含的文件夹下。在我的例子中是 src 文件夹。

我的 tsconfig.json 看起来像这样：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["DOM"],
    "jsx": "preserve",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "jsxImportSource": "@emotion/react"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "public", ".cache", "gatsby*"]
}

特定于 Emotion 的唯一配置是指定的 jsxImportSource here

就是这样。

Answer 2

我是通过以下方式做到的

const theme = {
  text: '#000000',
  backgroundColor: '#ff0000',
};

type Theme = typeof theme;

const GlobalStyle: React.FC = (props) => {
  const Theme = useTheme<Theme>();
  return (
    <Global
      styles={css`
        ...
      `}
    />
  );
};