React+TypeScript中使用emotion/styled时Theme类型扩展问题求助

我明白你现在遇到的这个TypeScript类型报错问题——明明传入ThemeProvider的主题对象包含palette属性，但TS就是判定props.theme是空对象，不认这些自定义属性，虽然代码能跑，但报错看着实在闹心。其实这是因为Emotion默认的Theme类型是个空接口，咱们得通过**模块扩展（Module Augmentation）**来告诉TypeScript咱们自定义的主题结构，下面一步步来操作：

1. 创建Emotion类型声明文件 #

首先在你的项目里（一般是src目录下）创建一个类型声明文件，比如命名为emotion.d.ts（名字可以随便取，只要后缀是.d.ts就行，TypeScript会自动识别这类声明文件）。

在这个文件里，我们需要扩展Emotion的Theme接口：

// 引入Emotion的类型模块
import '@emotion/react';

// 扩展Emotion的Theme接口
declare module '@emotion/react' {
  export interface Theme {
    // 这里写你自定义的主题结构，和你传入ThemeProvider的对象对应
    palette: {
      primary: {
        main: string;
        // 如果还有其他属性比如light、dark，也可以加上
        // light: string;
        // dark: string;
      };
      // 比如你还有secondary、error等配色，也继续补充
      secondary: {
        main: string;
      };
    };
    // 如果你的主题还有其他配置，比如typography、spacing，也在这里定义
    // typography: {
    //   fontSize: number;
    // };
  }
}

2. 确保声明文件被TS识别 #

检查你的tsconfig.json，确认include数组包含了这个声明文件所在的目录，比如：

{
  "compilerOptions": {
    // 其他配置...
  },
  "include": ["src/**/*"]
}

这样TS就能读取到咱们扩展的类型定义了。

3. 验证效果 #

现在你再写styled组件的时候，props.theme就会自动带上咱们定义的类型了，比如你原来的代码：

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

TypeScript不会再报错，而且还能给你自动补全主题里的属性，是不是舒服多了？

另外，当你创建ThemeProvider的主题对象时，TS也会自动校验对象结构是否符合咱们定义的Theme类型，避免你写错属性名。

如果你的主题结构比较复杂，也可以先单独定义一个主题接口，再让Emotion的Theme继承它，这样代码更清晰：

import '@emotion/react';

// 先定义自己的主题类型
interface CustomTheme {
  palette: {
    primary: {
      main: string;
    };
    secondary: {
      main: string;
    };
  };
}

// 让Emotion的Theme继承自定义类型
declare module '@emotion/react' {
  export interface Theme extends CustomTheme {}
}

内容的提问来源于stack exchange，提问作者mufasa