【Material-UI】详解安装指南

最新推荐文章于 2024-08-05 11:08:01 发布

Peter-Lu

最新推荐文章于 2024-08-05 11:08:01 发布

阅读量455

点赞数 14

分类专栏： # material-ui 文章标签： ui 安装 material-ui

本文链接：https://blog.csdn.net/lph159/article/details/140901715

版权

material-ui 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

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

在这里插入图片描述

Peter-Lu

关注

14
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Material-UI】详解安装指南

本文详细介绍了如何在项目中安装和配置Material-UI。无论是默认的Emotion样式引擎，还是替代的styled-components，您都可以根据项目需求进行选择。同时，我们还介绍了如何添加Roboto字体和Material Icons图标，确保您的应用拥有一致且美观的用户界面。通过正确的安装和配置，Material-UI将成为您React项目中不可或缺的工具。希望这篇推文能帮助您快速上手Material-UI，构建出色的Web应用。
复制链接

扫一扫