Nota especial : si su versión de React es v17.0.1 , no utilice el libro de cuentos. Por algunas razones, el libro de cuentos lanzado en esta versión de React no se puede mostrar normalmente (pantalla blanca). Si necesita usar el libro de cuentos, baje la versión de React primero A partir de v16.x , todo el contenido mostrado en este blog está en la versión v16.13.1.
instalación
Inicie la consola en el directorio raíz del archivo del proyecto e ingrese el siguiente comando.
Nota: Este proceso de instalación es muy largo, tenga paciencia
npx -p @storybook/cli sb init
Este comando configurará automáticamente el proyecto para nosotros y generará un archivo de muestra.
Dado que storybook es independiente del entorno operativo de create react, necesitamos cargar algunos temas de componentes de estilo para storybook por separado
Iniciar libro de cuentos
Ingrese el comando en el directorio raíz del proyecto de la consola para iniciar el proyecto
npm run storybook
En este punto, verá la interfaz del libro de cuentos.
Montar componentes con estilo
Busque el archivo preview.js en el archivo **. Storybook y reemplace el código interno con el siguiente código
import React from "react";
import {
addDecorator } from "@storybook/react";
import {
ThemeProvider } from "styled-components";
addDecorator((storyFn) => (
<ThemeProvider>{
storyFn()}</ThemeProvider>
))
Nota: Utilice el componente ThemeProvider en styled-components para ajustar el libro de cuentos una vez para implementar los componentes con estilo en el libro de cuentos.