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