npm install @mui/joy @emotion/react @emotion/styled
相依性套件
請注意,react 和 react-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"
/>