統合 →このページを編集.md

Material UI

@lazarv/react-serverは、GoogleのMaterial Designを実装する人気のReactコンポーネントライブラリであるMaterial UI (MUI)と互換性があります。MUIはCSS-in-JSスタイリングにEmotionを使用しており、@lazarv/react-serverでそのまま動作します。

Material UIと必要な依存関係をインストールします:

pnpm add @mui/material @emotion/react @emotion/styled

オプションで、RobotoフォントとMaterial Iconsをインストールします:

pnpm add @fontsource/roboto @mui/icons-material

Material UIテーマを設定するテーマファイルを作成します:

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が必要です。アプリをラップするクライアントコンポーネントを作成します:

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 (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Container maxWidth="lg">
        {children}
      </Container>
    </ThemeProvider>
  );
}

次に、フォントをインポートし、Layoutプロバイダーコンポーネントを使用するルートレイアウトを設定します:

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 (
    <html lang="en" suppressHydrationWarning>
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My App</title>
      </head>
      <body suppressHydrationWarning>
        <Layout>{children}</Layout>
      </body>
    </html>
  );
}

MUIのリンクやボタンコンポーネントを@lazarv/react-serverのクライアントサイドナビゲーションで使用するには、componentプロップを介してランタイムのLinkコンポーネントを渡します:

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 (
    <Link to="/about" color="secondary" component={ReactServerLink}>
      Go to the about page
    </Link>
  );
}

同じパターンでMUIのButtonをナビゲーションに使用できます:

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 (
    <Button to="/" component={ReactServerLink}>
      Go to the home page
    </Button>
  );
}

ブラウザAPIやReactフックに依存しない一部のMUIコンポーネントは、サーバーコンポーネントで直接使用できます。TypographyやLink（ナビゲーションなし）などのコンポーネントはサーバーコンポーネントで動作します:

app/components/Copyright.jsx
import Typography from "@mui/material/Typography";
import Link from "@mui/material/Link";

export default function Copyright() {
  return (
    <Typography variant="body2" color="text.secondary" align="center">
      {"Copyright © "}
      <Link color="inherit" href="https://mui.com/">
        Your Website
      </Link>{" "}
      {new Date().getFullYear()}.
    </Typography>
  );
}

@mui/icons-materialを使用する場合、適切なモジュール解決のためにESMパスからアイコンをインポートします:

import LightbulbOutlined from "@mui/icons-material/esm/LightbulbOutlined";

@lazarv/react-serverでMUIを使用する完全な例については、Material UI exampleを確認してください。

← 統合: Mantine UI統合: Claude Code →