如何在.ts文件中正确使用Material-UI组件

首先解决最容易踩的基础问题：

• 所有包含JSX语法（即<Xxx />这类标签写法）的TypeScript文件，必须使用.tsx作为文件后缀，纯.ts后缀的文件默认不解析JSX语法，会直接抛出语法错误。你在mocks目录下的文件如果目前是.ts后缀，直接改名为.tsx即可，不会影响mock数据的正常导入和使用。

按以下步骤配置即可正常使用：

1. 安装必要依赖
   如果项目还没安装MUI相关依赖，先执行安装命令：
   npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
   其中@mui/icons-material是MUI官方图标包，Facebook图标就来自这个包。

2. 补全匹配的类型定义
   你代码中用到了Link类型，其中icon字段存储的是可渲染的React节点，需要把类型定义对应上，参考写法：

import type { ReactNode } from 'react';
// 定义Link类型
type Link = {
  url: string;
  icon: ReactNode; // 兼容所有可渲染的React元素，包括MUI组件
}

3. 正确导入组件并使用
   MUI每个图标都是独立的默认导出项，直接导入后即可在JSX中使用，和你写的示例逻辑一致：

// 从图标包导入Facebook图标
import Facebook from '@mui/icons-material/Facebook';

export const links: Link[] = [
  {
    url: "https://uk-ua.facebook.com/",
    icon: <Facebook fontSize="large" />,
  },
  // 其余链接项按相同格式编写即可
]

常见问题排查：

• 如果TS报找不到@mui/icons-material模块的错误，先确认依赖是否安装成功，安装完成后重启IDE的TypeScript服务即可
• 如果图标渲染不生效，检查是否误把组件写成了字符串格式（比如icon: "Facebook"），必须直接传入JSX标签
• React17及以上版本不需要在文件顶部显式导入React，低版本需要额外加import React from 'react'才能正常解析JSX

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