# Material UI
`@lazarv/react-server`は、GoogleのMaterial Designを実装する人気のReactコンポーネントライブラリである[Material UI (MUI)](https://mui.com/material-ui/)と互換性があります。MUIはCSS-in-JSスタイリングにEmotionを使用しており、`@lazarv/react-server`でそのまま動作します。
## インストール
Material UIと必要な依存関係をインストールします:
```sh
pnpm add @mui/material @emotion/react @emotion/styled
```
オプションで、RobotoフォントとMaterial Iconsをインストールします:
```sh
pnpm add @fontsource/roboto @mui/icons-material
```
## テーマのセットアップ
Material UIテーマを設定するテーマファイルを作成します:
```js filename="app/theme.mjs"
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
palette: {
mode: "light",
},
typography: {
fontFamily: "Roboto",
},
});
export default theme;
```
## プロバイダーのセットアップ
Material UIには、適切なテーマとベースラインスタイルのために`ThemeProvider`と`CssBaseline`が必要です。アプリをラップするクライアントコンポーネントを作成します:
```jsx filename="app/components/Layout.jsx"
"use client";
import Container from "@mui/material/Container";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../theme";
export default function Layout({ children }) {
return (
{children}
);
}
```
次に、フォントをインポートし、`Layout`プロバイダーコンポーネントを使用するルートレイアウトを設定します:
```jsx filename="app/layout.jsx"
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import Layout from "./components/Layout";
export default function RootLayout({ children }) {
return (
My App
{children}
);
}
```
## ナビゲーション
MUIのリンクやボタンコンポーネントを`@lazarv/react-server`のクライアントサイドナビゲーションで使用するには、`component`プロップを介してランタイムの`Link`コンポーネントを渡します:
```jsx filename="app/page.jsx"
"use client";
import { Link as ReactServerLink } from "@lazarv/react-server/navigation";
import Link from "@mui/material/Link";
export default function Home() {
return (
Go to the about page
);
}
```
同じパターンでMUIの`Button`をナビゲーションに使用できます:
```jsx filename="app/about/page.jsx"
"use client";
import { Link as ReactServerLink } from "@lazarv/react-server/navigation";
import Button from "@mui/material/Button";
export default function About() {
return (
);
}
```
## サーバーコンポーネント
ブラウザAPIやReactフックに依存しない一部のMUIコンポーネントは、サーバーコンポーネントで直接使用できます。`Typography`や`Link`（ナビゲーションなし）などのコンポーネントはサーバーコンポーネントで動作します:
```jsx filename="app/components/Copyright.jsx"
import Typography from "@mui/material/Typography";
import Link from "@mui/material/Link";
export default function Copyright() {
return (
{"Copyright © "}
Your Website
{" "}
{new Date().getFullYear()}.
);
}
```
## アイコン
`@mui/icons-material`を使用する場合、適切なモジュール解決のためにESMパスからアイコンをインポートします:
```jsx
import LightbulbOutlined from "@mui/icons-material/esm/LightbulbOutlined";
```
> `@lazarv/react-server`でMUIを使用する完全な例については、[Material UI example](https://github.com/lazarv/react-server/tree/main/examples/mui)を確認してください。