typescript - 带有 typescript 的 EmotionJS 不会将主题类型传递给样式组件中的 Prop

Question

情感.d.ts

import '@emotion/react';

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

应用程序.tsx

import { Theme, ThemeProvider } from '@emotion/react';

const theme: Theme = {
    colors: {
        accentColor: 'hotpink',
        primaryColor: 'aqua',
    },
};
...

return (
<ThemeProvider theme={theme}>

...

按钮.tsx

const StyledButton = styled.a`
    ${({ theme }) =>
        `background-color: ${theme.colors.accentColor};`
    }`;

配置文件

{
    "compilerOptions": {
        "target": "es6",
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "typeRoots": ["src/@types"],
        "jsx": "react",
        "strict": true,
        "strictNullChecks": true,
        "baseUrl": "./",
        "paths": {
            "*": ["src/@types/*"]
        }
    },
    "compileOnSave": false,
    "include": ["src/**/*"]
}

src
|=>@types
  |> emotion.d.ts
|=> components
|> App.tsx

'object' 类型不存在属性 'colors'。
我做错了什么还是我误读了文档？
现在我通过将主题传递给样式构造函数来手动添加主题:

type StyledProps = Pick<ButtonProps, 'bgColor' | 'fColor'> & { theme: Theme };

const StyledButton = styled.a<StyledProps>`
...

删除传递的类型也无济于事。
似乎 d.ts 文件被正确提取，因为我可以从 "@emtion/react" 导入正确的主题类型与 import { Theme } from "@emotion/react"并用它来输入 props.theme在样式组件中
Repro

Answer 1

根据您提供的代码，我认为错误应该是:

Property 'accentColor' does not exist on type 'Theme'. // instead of object

反正你的 Theme现在由 colors 嵌套的对象在顶层，因此您可能会更改为:

const StyledButton = styled.a`
  ${({ theme }) =>
      `background-color: ${theme.colors.accentColor};` // `accentColor` is nested in `colors`
  }`;

请记住，您还需要在 tsconfig.json 的构建过程中包含您定义的类型。文件通过 include选项。
关于无法覆盖的更新 Theme通过自定义类型文件
正如我所看到的 styled类型只消耗 Theme来自 @emotion/react 的对象至少从版本 ^11.0.0 .
总之，你要更新 @emotion/styled从此版本 ^11.0.0使其按预期工作:

{
  "dependencies": {
    // ...
    "@emotion/styled": "^11.0.0",
  }
}