react项目中的storybook初始化并挂载styled-components步骤

特别注意：如果你们的React版本是v17.0.1，请先不要使用storybook，因为某些原因，在此React版本里启动的storybook不能正常显示（白屏），如需要使用storybook请先将React版本降低到v16.x，此博客演示的所有内容均在v16.13.1版本里。

安装

在项目文件根目录下启动控制台，输入以下命令
注：此安装过程很漫长，请耐心等待

npx -p @storybook/cli sb init

此命令会自动帮我们配置好项目，同时生成一个示例文件
因为storybook是独立于create react的运行环境的，所以我们需要单独给storybook加载一些style-components的主题

启动storybook

控制台项目根目录输入一下命令启动项目

npm run storybook

此时你们会看到storybook的界面

挂载styled-components

在**.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组件对storybook进行一次包裹实现在storybook中应用styled-components。