跳到主要內容
+

安裝

安裝 Joy UI,一個設計精美的 React UI 元件庫。

預設安裝

執行以下其中一個指令,將 Joy UI 加入到你的專案中

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

相依性套件

請注意,reactreact-dom 是相依性套件,這表示您應該在安裝 Joy UI 之前確保它們已安裝。

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

Inter 字體

Joy UI 預設使用 Inter 字體。透過 Fontsource 或 Google Fonts CDN 將其加入到你的專案中。

Fontsource

執行以下其中一個指令,透過 Fontsource 將 Inter 加入到你的 Joy UI 專案中

npm install @fontsource/inter

然後你可以像這樣在你的入口點匯入它

import '@fontsource/inter';

Google Web Fonts

若要透過 Google Web Fonts CDN 安裝 Inter,請將以下程式碼加入到你專案的 <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=Inter:wght@300;400;500;600;700&display=swap"
/>