跳转到内容

安装

安装 Material-UI —— 世界上最受欢迎的 React UI 框架。

Material-UI 可以通过 npm 包来安装。

npm

安装 Material-UI 并写入 package.json 依赖文件:

// 用npm安装
npm install @material-ui/core

// 用yarn安装
yarn add @material-ui/core

请注意,需要依赖 react >= 16.8.0 版和 react-dom >= 16.8.0 版。

Roboto 字体

Material-UI 的设计与 Roboto 字体相配。 因此,请按照此说明载入字体。 例如,使用 Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

字体图标

为了使用字体图标 组件,你必须添加 Material icons 字体. 这是如何去做的 一些说明 例如,使用 Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

SVG 图标

为了使用预先构建的 SVG Material 图标,例如这里的演示图标,你必须先安装 @material-ui/icons包:

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

CDN

您可以使用最少的前端基础架构开始使用Material-UI,这对于原型设计很有用

提供两个通用模块定义(** UMD ** )的文件:

您可以按照此CDN示例快速开始。

⚠️在生产环境使用这种方式是不推荐的,因为客户端必须下载整个库,而不管实际上只使用哪些组件,这样的话会影响性能和带宽利用率。

⚠️ UMD 链接使用 latest 标签指向最新版本的库。 这个指向是不稳定的,它随着我们发布的新版本而改变。 您应该考虑指向一个具体的版本,如 v4.4.0