Storybook 和 AntDesign 组件 - 如何使用 CRA 和 Typescript 进行设置？

Posted 2023-02-19

【中文标题】Storybook 和 AntDesign 组件 - 如何使用 CRA 和 Typescript 进行设置？

【英文标题】：Storybook and AntDesign components - how to set-up with CRA & Typescript?

【发布时间】：2020-02-27 12:58:30

【问题描述】：

我想在我的 CRA 项目中使用 Typescript 使用构建在 AntDesign 组件之上的组件来设置 Storybook。

CRA - v3 故事书 - v5.25 AntDesign - v3.23.2

我成功设置了 CRA + AntDesign，设置了 Storybook，我的 AntDesign 组件在 Storybook 中使用 AntD css 类进行渲染，但样式缺失

我试过了

在 .stories 文件夹中创建一个 webpack.config.js 文件并使用来自Storybook doesn't understand import on demand for antd components 和https://github.com/storybookjs/storybook/issues/3949/ 的配置 创建一个 .babelrc 文件并在那里导入 babel import 和 ant 使用与 Advanced AntD 文档中描述的相同配置：https://ant.design/docs/react/use-with-create-react-app

这些方法都不允许我使用样式来渲染 AntD 组件

// .stories/webpack.config.js

const path = require("path");

module.exports = 
  module: 
    rules: [
      
        loader: "babel-loader",
        exclude: /node_modules/,
        test: /\.js$/,
        options: 
          presets: ["@babel/react"],
          plugins: [["import",  libraryName: "antd", style: true ]]
        
      ,
      
        test: /\.less$/,
        loaders: [
          "style-loader",
          "css-loader",
          
            loader: "less-loader",

            options: 
              modifyVars:  "@primary-color": "#d8df19" ,
              javascriptEnabled: true
            
          
        ],
        include: path.resolve(__dirname, "../")
      
    ]
  
;

// .stories/.babelrc

  "plugins": [
    [
      "import",
      
        "libraryName": "antd",
        "style": "css"
      
    ]
  ]

//我的基于AntDesign的组件

import  Menu  from "antd";
import React,  FC  from "react";
import  RouteComponentProps, withRouter  from "react-router";
import  styled  from "styletron-react";

export const Sidebar: FC<RouteComponentProps> = ( history ) => 
  const SidebarLayout = styled(Menu, 
    height: "100vh",
    width: "100%"
  );

  return (
    <SidebarLayout
      onSelect=item => 
        history.push(item.key);
      
      defaultSelectedKeys=["/"]
      selectedKeys=[history.location.pathname]
      mode="inline"
      theme="dark"
    >
      <Menu.Item key="/">Table View</Menu.Item>
      <Menu.Item key="/dashboard">Dashboard</Menu.Item>
    </SidebarLayout>
  );
;

export default withRouter(Sidebar);

// 我的故事

import  storiesOf  from "@storybook/react";
import  Button  from "antd";
import React from "react";
import  MemoryRouter  from "react-router";
import Sidebar from ".";

storiesOf("Sidebar", module).add("Renders a regular menu", () => 
  return (
    <MemoryRouter initialEntries=["/"]>
      <Sidebar />
      <Button type="primary">Button</Button>
    </MemoryRouter>
  );
);

// 运行故事书会显示： outcome of running storybook

我希望在我的故事书中呈现基于 AntD 的组件，就像在我的 CRA 项目中一样： outcome of running CRA based project

【问题讨论】：

Storybook requires default Ant Design component to be exported for styling to be applied的可能重复

【参考方案1】：

在故事书的config.js 文件中导入antd 样式import 'antd/dist/antd.css';：

// @ .storybook/config.js 
import  configure  from '@storybook/react';
import 'antd/dist/antd.css';

function loadStories() 
  const req = require.context('stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));


configure(loadStories, module);

请参阅 CSS Support storybook 文档。

【参考方案2】：

以下是我如何使它与 Storybook v6

一起使用

第 1 步： 为 Ant 设计安装预设。 Source

npm i -D @storybook/preset-ant-design

第 2 步：在您的 .storybook/main.js 中添加上述预设的参考。还要注意@storybook/preset-create-react-app 的选项是如何被覆盖的。

module.exports = 
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-ant-design",
    
      "name": "@storybook/preset-create-react-app",
      "options": 
        "craOverrides": 
          "fileLoaderExcludes": ["less"]
        
      
    
  ],

看起来 Storybook 6.0 完成了其余的事情，就我而言，除了这两个之外不需要任何更改。