文章目录
- 一、默认安装
- 1.1 Peer Dependencies
- 二、使用styled-components
- 三、Roboto字体
- 3.1 使用Fontsource
- 3.2 使用Google Web Fonts
- 四、图标
- 4.1 使用Google Web Fonts
- 五、CDN安装
- 六、总结
Material-UI是全球最受欢迎的React UI框架之一。它提供了丰富的组件和高度可定制的主题系统，帮助开发者快速构建现代化的Web应用。本篇推文将详细介绍如何在项目中安装和配置Material-UI，包括默认安装、使用不同的样式引擎、添加字体及图标等，帮助您快速上手这一强大的UI工具。
一、默认安装
要将Material-UI添加到您的项目中，可以选择以下任一包管理器：
- npm：Node.js包管理器，广泛应用于前端开发。
- yarn：Facebook推出的替代npm的包管理器，具有更快的安装速度和更好的依赖管理。
- pnpm：一种更高效的包管理器，采用了硬链接技术来节省磁盘空间。
您可以使用以下命令之一来安装Material-UI：
# 使用 npm
npm install @mui/material @emotion/react @emotion/styled
# 使用 yarn
yarn add @mui/material @emotion/react @emotion/styled
# 使用 pnpm
pnpm add @mui/material @emotion/react @emotion/styled
1.1 Peer Dependencies
Material-UI依赖于React和React DOM，这意味着它们需要在您的项目中已经安装或与Material-UI一起安装。Material-UI目前支持React版本17.0.0和18.0.0。
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
}
确保您的项目中包含这些版本的React和React DOM，否则可能会遇到兼容性问题。
二、使用styled-components
Material-UI默认使用Emotion作为其样式引擎。如果您更喜欢使用styled-components，可以通过以下命令进行安装：
# 使用 npm
npm install @mui/material @mui/styled-engine-sc styled-components
# 使用 yarn
yarn add @mui/material @mui/styled-engine-sc styled-components
# 使用 pnpm
pnpm add @mui/material @mui/styled-engine-sc styled-components
接下来，请参考styled-components的配置指南来正确配置打包工具，以支持@mui/styled-engine-sc。
注意：截至2021年底，styled-components与服务端渲染（SSR）的Material-UI项目不兼容。这是因为
babel-plugin-styled-components无法与@mui包内的styled()工具一起工作。更多细节请参见GitHub问题。建议SSR项目使用Emotion。
三、Roboto字体
Material-UI默认使用Roboto字体。您可以通过以下两种方式将其添加到您的项目中：
3.1 使用Fontsource
通过Fontsource，您可以轻松地将Roboto字体集成到项目中，并根据需要选择加载的子集、权重和样式。使用以下命令安装：
# 使用 npm
npm install @fontsource/roboto
# 使用 yarn
yarn add @fontsource/roboto
# 使用 pnpm
pnpm add @fontsource/roboto
然后在入口文件中导入需要的字体权重：
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
3.2 使用Google Web Fonts
您也可以通过Google Web Fonts CDN加载Roboto字体。将以下代码片段添加到项目的<head />标签中：
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>
四、图标
Material-UI提供了一套预构建的SVG Material Icons，可以通过安装@mui/icons-material包来使用这些图标：
# 使用 npm
npm install @mui/icons-material
# 使用 yarn
yarn add @mui/icons-material
# 使用 pnpm
pnpm add @mui/icons-material
4.1 使用Google Web Fonts
您也可以通过Google Web Fonts CDN加载Material Icons字体。将以下代码片段添加到项目的<head />标签中：
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
五、CDN安装
如果您希望快速进行原型开发，您可以通过CDN加载Material-UI。这种方式适用于快速原型制作，但不推荐用于生产环境，因为它会导致整个库的下载，无论实际使用了多少组件，从而影响性能和带宽使用。
Material-UI提供了两个UMD文件：
- 开发版：material-ui.development.js
- 生产版：material-ui.production.min.js
注意：UMD链接指向最新版本。这种指向是不稳定的，随着新版本的发布可能会改变。建议在生产环境中指向特定的版本，例如v5.0.0。
六、总结
本文详细介绍了如何在项目中安装和配置Material-UI。无论是默认的Emotion样式引擎，还是替代的styled-components，您都可以根据项目需求进行选择。同时，我们还介绍了如何添加Roboto字体和Material Icons图标，确保您的应用拥有一致且美观的用户界面。
通过正确的安装和配置，Material-UI将成为您React项目中不可或缺的工具。希望这篇推文能帮助您快速上手Material-UI，构建出色的Web应用。
推荐：
- JavaScript
- react
- vue
