特記事項：Reactバージョンがv17.0.1の場合、ストーリーブックは使用しないでください。何らかの理由で、このReactバージョンで起動されたストーリーブックは正常に表示されません（白い画面）。ストーリーブックを使用する必要がある場合は、Reactバージョンを下げてください。最初v16.xの時点で、このブログに示されているすべてのコンテンツはv16.13.1バージョンです。
インストール
プロジェクトファイルのルートディレクトリでコンソールを起動し、次のコマンドを入力します。
注：このインストールプロセスは非常に長いため、しばらくお待ちください。
npx -p @storybook/cli sb init
このコマンドは、プロジェクトを自動的に構成し、サンプルファイルを生成します。
ストーリーブックはcreate reactの動作環境に依存しないため、ストーリーブックのいくつかのスタイルコンポーネントテーマを個別にロードする必要があります。
ストーリーブックを開始
コンソールプロジェクトのルートディレクトリにコマンドを入力して、プロジェクトを開始します
npm run storybook
この時点で、ストーリーブックのインターフェースが表示されます
スタイル付きコンポーネントをマウントする
**。storybookファイルでpreview.jsファイルを見つけ、その中のコードを次のコードに置き換えます
import React from "react";
import {
addDecorator } from "@storybook/react";
import {
ThemeProvider } from "styled-components";
addDecorator((storyFn) => (
<ThemeProvider>{
storyFn()}</ThemeProvider>
))
注：styled-componentsのThemeProviderコンポーネントを使用して、ストーリーブックを1回ラップし、storybookにstyled-componentsを実装します。