Electron+Typescript+Material-UI withStyles报错TS2694: csstype无FontFace导出

问题根因 #

该报错和自定义@font-face字体引入无关，是依赖版本不匹配导致：Material UI v4的@material-ui/styles包依赖3.0.x版本的csstype类型库，该版本存在FontFace导出项，你重新安装依赖时包管理工具自动拉取了更高版本的csstype，而高版本csstype已移除FontFace导出，因此触发TS类型校验报错。

解决方案（任选其一即可） #

方案1：固定csstype兼容版本 #

针对不同包管理工具，在package.json中添加对应配置锁定版本：

• 若使用npm 8.3+版本，添加overrides配置：

{
  // 原有package.json配置保留，新增以下内容
  "overrides": {
    "csstype": "3.0.11"
  }
}

• 若使用yarn，添加resolutions配置：

{
  // 原有package.json配置保留，新增以下内容
  "resolutions": {
    "csstype": "3.0.11"
  }
}

配置完成后删除node_modules文件夹和包锁定文件（package-lock.json/yarn.lock），重新执行npm install或yarn install安装依赖即可。

方案2：跳过第三方库类型校验 #

在tsconfig.json的compilerOptions中添加配置，跳过node_modules下的类型文件检查，不影响项目自有代码的TS校验：

{
  "compilerOptions": {
    // 原有配置保留，新增以下项
    "skipLibCheck": true
  }
}

修改后直接执行tsc即可正常通过校验。

方案3：调整withStyles导入路径 #

将你代码中withStyles的导入源从@material-ui/styles/index改为@material-ui/core/styles，直接使用MUI core内置的样式工具，规避类型不兼容问题：

// 修改前
import { withStyles } from '@material-ui/styles/index';
// 修改后
import { withStyles } from '@material-ui/core/styles';

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