Zenn
Closed8

Next.js + @radix-ui/themes + Storybookで動くところまで

Next.js
Storybook
mt_coffmt_coff

作業手順

mt_coffmt_coff

app/global.css でCSSを読み込む。
layout.tsx で読み込まないこと

@import '~@radix-ui/themes/styles.css';
mt_coffmt_coff

Storyookを導入する

npx storybook@latest init

いい感じにNext.jsのプロジェクトであることを判断して設定してくれる

mt_coffmt_coff

このままだと@radix-ui/themesのCSSを読み込まないので.storybook/preview.ts でapp/global.css を読み込む。

 import type { Preview } from "@storybook/react";
+import "../app/global.css";

 const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

 export default preview;
mt_coffmt_coff

preview.tsxにリネームしてDecoratorを追加。これでStorybook側はOK

+import React from "react";
 import type { Preview } from "@storybook/react";
 import "../app/global.css";
+import { Theme } from "@radix-ui/themes";

 const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
+ decorators: [
+   (Story) => {
+     return (
+       <Theme>
+         <Story />
+       </Theme>
+     );
+   },
+ ],
};

 export default preview;
mt_coffmt_coff

app/layout.tsx にもThemeを追加する。

 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import { Theme } from "@radix-ui/themes";
 import './globals.css'

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

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

 export default function RootLayout({
  children,
 }: {
   children: React.ReactNode
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>
-        {children}
+        <Theme>{children}</Theme>
       </body>
    </html>
   )
 }
このスクラップは6ヶ月前にクローズされました