# MUI Theme
## Overview
[MUI](https://mui.com/) (short for Material-UI) is a popular open-source library of React components that follows the principles and design guidelines of Google's Material Design system. MUI provides a set of pre-built, customizable UI components such as buttons, forms, cards, and more, that help developers quickly build high-quality, responsive user interfaces for web applications.
## How to use
Here we use MUI. The installation method is as follows below.
{% hint style="info" %}
[The official MUI documentation](https://github.com/vercel/next.js/tree/canary/examples/with-material-ui)
{% endhint %}
### Step 1: Install MUI dependencies
To use MUI in your app, you need to install the following dependencies:
```bash
yarn add @mui/material @emotion/react @emotion/styled
```
* `@mui/material`: This is the main MUI package that contains all the components and styles.
* `@emotion/react` and `@emotion/styled`: These are Emotion libraries that are used by MUI for styling.
### Step 2: Create a `_document.tsx` file
The `_document.tsx` file is used to customize the HTML document that is served to the client. To use MUI in your app, you need to add the MUI CSS baseline to the document. Here's how you can create a `_document.tsx` file:
1. Create a new file called `_document.tsx` in the `pages` directory.
2. Add the following code to the file:
```tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@mui/styles';
export default class MyDocument extends Document {
render() {
return (
{/* Import the MUI CSS baseline */}
);
}
}
MyDocument.getInitialProps = async (ctx) => {
// Render the app and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheets.collect(),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
```
This code does the following:
* Imports the necessary modules for creating a custom document.
* Defines a `MyDocument` class that extends `Document`.
* Overrides the `render` method of the `MyDocument` class to customize the HTML document.
* Adds the MUI CSS baseline to the `Head` section of the document.
* Sets up server-side rendering of MUI styles using `ServerStyleSheets` and `getInitialProps`.
### Step 3: Use the `ThemeProvider` component in `_app.tsx`
You'll need to import and use the `ThemeProvider` component from MUI in your `_app.tsx` file.
To do this, open up your `_app.tsx` file in the `pages` directory and add the following code:
```jsx
import { ThemeProvider } from '@mui/material/styles';
import { CssBaseline } from '@mui/material';
function MyApp({ Component, pageProps }: AppProps) {
return (
);
}
export default MyApp;
```
This code imports the `ThemeProvider` component and the `CssBaseline` component from MUI and uses them to wrap your app component. The `ThemeProvider` component is used to apply your MUI theme to your app, and the `CssBaseline` component is used to apply a baseline CSS style to your app.
Note: In order to use the `ThemeProvider` component, you'll need to define and create your own MUI theme. You can create your theme in a separate file and import it into your `_app.tsx` file.
### Step 4: Import MUI components and start using them in your app
With MUI installed and your `ThemeProvider` set up, you can start using MUI components in your app.
To use MUI components, simply import them from the `@mui/material` package and use them in your app. For example:
```jsx
import { Button } from '@mui/material';
function Home() {
return (
);
}
export default Home;
```
This code imports the `Button` component from MUI and uses it in a `Home` component.