安裝

安裝 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 Icons（例如在圖示示範中找到的那些），您必須先安裝 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

您可以立即開始使用 Material UI，只需最少的前端基礎架構，透過 CDN 安裝它，這是快速原型設計的絕佳選擇。

依照此 CDN 範例開始使用。