Installation - Joy UI

內容

Skip to content

Install Joy UI, a library of beautifully designed React UI components.

Default installation

Run one of the following commands to add Joy UI to your project:

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

Peer dependencies

Please note that react and react-dom are peer dependencies, meaning you should ensure they are installed before installing Joy UI.

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

Inter font

Joy UI uses the Interfont by default. Add it to your project via Fontsource, or with the Google Fonts CDN.

Fontsource

Run one of the following commands to add Inter through Fontsource to your Joy UI project:

npm install @fontsource/inter

Then you can import it in your entry point like this:

import '@fontsource/inter';

Google Web Fonts

To install Inter through the Google Web Fonts CDN, add the following code inside your project's <head /> tag:

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

MUI stands in solidarity with Ukraine.

Contents

連結
https://mui.com/joy-ui/getting-started/installation/
總結
Joy UI is a library of React UI components with beautiful designs. To install Joy UI, run 'npm install @mui/joy @emotion/react @emotion/styled'. Make sure to have peer dependencies react and react-dom installed. Joy UI uses the Inter font by default, which can be added to the project through Fontsource or Google Fonts CDN. To add Inter via Fontsource, run 'npm install @fontsource/inter' and import it in the entry point. For Google Web Fonts, add a specific code snippet inside the project's <head /> tag. MUI expresses solidarity with Ukraine.