Zenn
😎

App RouterでYamada UIのテーマをカスタムする方法

2024/02/04に公開1件
Next.js
React
UI
#
App Router
Yamada UI
tech

ドキュメントを参考にして以下のように書くとエラーになります。

layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { UIProvider, extendTheme } from "@yamada-ui/react"

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const customTheme = extendTheme({
  semantics: {
      colors: {
          primary: "pink.500",
      },
      colorSchemes: {
          primary: "pink",
      },
  },
})();

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <UIProvider theme={customTheme}>
          {children}
        </UIProvider>
      </body>
    </html>
  );
}

エラー

原因は、extendThemeがサーバーサイドで実行できないからなので、"use client"で実行できるように外部のファイルに分けてあげます。

テーマだけを記述

theme/index.ts
"use client"
import { extendTheme } from "@yamada-ui/react";

// extendThemeは内部で"use client"で実行しなければならない処理をしているから外部ファイルに"use client"をつけてexportする

export const customTheme = extendTheme({
    semantics: {
        colors: {
            primary: "pink.500",
        },
        colorSchemes: {
            primary: "pink",
        },
    },
})();

テーマを読み込み

layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { UIProvider } from "@yamada-ui/react"
import { customTheme } from "@/theme";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <UIProvider theme={customTheme}>
          {children}
        </UIProvider>
      </body>
    </html>
  );
}

こうして上げると、Yamada UIのコンポーネントでテーマをカスタマイズできます。

page.tsx
import { Container, Heading } from "@yamada-ui/react";

export default function Home() {
  return (
    <Container>
      <Heading color="primary">Hello</Heading>
    </Container>
  );
}

primaryがピンク色になった

プレビュー画像

リポジトリ

GitHubで編集を提案

Discussion