安装

Install Material UI, the world's most popular React UI framework.

Material UI is available as an npm package.

npm

To install and save in your package.json dependencies, run the command below using npm:

npm install @mui/material @emotion/react @emotion/styled

Or yarn:

yarn add @mui/material @emotion/react @emotion/styled

Please note that react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies.

Material UI is using emotion as a styling engine by default. If you want to use styled-components instead, run:

npm install @mui/material @mui/styled-engine-sc styled-components

yarn add @mui/material @mui/styled-engine-sc styled-components

Roboto 字体

Material UI was designed with the Roboto font in mind. So be sure to follow these instructions. For instance, via Google Web Fonts:

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

字体图标

To use the font Icon component, you must first add the Material Icons font. Here are some instructions on how to do so. For instance, via Google Web Fonts:

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

SVG 图标

In order to use prebuilt SVG Material icons, such as those found in the icons demos you must first install the @mui/icons-material package:

With npm:

npm install @mui/icons-material

With yarn:

yarn add @mui/icons-material

CDN

You can start using Material UI with minimal Front-end infrastructure, which is great for prototyping.

Two Universal Module Definition (UMD) files are provided:

您可以在开发环境调试：https://unpkg.com/@mui/material@latest/umd/material-ui.development.js
也可放心地在生产环境使用: https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js

You can follow this CDN example to quickly get started.

⚠️ Using this approach in production is discouraged though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.

⚠️ The UMD links are using the latest tag to point to the latest version of the library. This pointer is unstable, it shifts as we release new versions. You should consider pointing to a specific version, such as v5.0.0.

设计资源

A set of reusable components for design tools is available, designed to match the React components and to help you craft great products:

Figma: A large UI kit with over 600 handcrafted Material UI components.
Adobe XD: A large UI kit with over 600 handcrafted Material UI components.
Sketch: A large UI kit with over 600 handcrafted Material UI symbols.
UXPin: A large UI kit of Material UI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment.