安装

安装 Material UI，世界上最流行的 React UI 框架。

默认安装

运行以下命令之一将 Material UI 添加到你的项目

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

对等依赖

请注意，react 和 react-dom 是对等依赖，这意味着在安装 Material UI 之前，应确保已安装它们。

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

使用 styled-components

Material UI 使用 Emotion 作为其默认样式引擎。如果你想使用 styled-components，请运行以下命令之一

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

接下来，按照styled-components 操作指南正确配置你的打包器以支持 @mui/styled-engine-sc。

Roboto 字体

Material UI 默认使用 Roboto 字体。通过 Fontsource 或 Google Fonts CDN 将其添加到你的项目。

npm install @fontsource/roboto

然后你可以像这样在你的入口点导入它

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

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"
/>

图标

要使用字体图标组件或预构建的 SVG Material 图标（例如在图标演示中找到的那些），你必须首先安装 Material Icons 字体。你可以使用 npm 或 Google Web Fonts CDN 来做到这一点。

npm install @mui/icons-material

Google Web Fonts

要使用 Google Web Fonts CDN 在你的项目中安装 Material Icons 字体，请将以下代码片段添加到你项目的 <head /> 标签中

要使用字体 Icon 组件，你必须首先添加 Material Icons 字体。以下是一些关于如何操作的说明。例如，通过 Google Web Fonts

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

CDN

你可以通过 CDN 安装 Material UI 立即开始使用，只需最少的前端基础设施，这对于快速原型设计来说是一个不错的选择。

按照此 CDN 示例开始使用。