Storybook 和 AntDesign 组件 - 如何设置 CRA &打字稿? [英] Storybook and AntDesign components - how to set-up with CRA & Typescript?

问题描述

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

I want to set up Storybook with components built on top of AntDesign components inside my CRA project with Typescript.

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

CRA - v3 Storybook - v5.25 AntDesign - v3.23.2

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

I succeed in setting up CRA + AntDesign, setting up Storybook, my AntDesign components render in Storybook with AntD css classes, but the styling is missing

我试过了

• 在 .stories 文件夹中创建一个 webpack.config.js 文件并使用来自 Storybook 不理解按需导入 antd 组件 和 https://github.com/storybookjs/storybook/issues/3949/
• 创建一个 .babelrc 文件并在那里导入 babel import 和 ant
• 使用与高级 AntD 文档中描述的相同的配置:https://ant.design/docs/react/use-with-create-react-app

• creating a webpack.config.js file in .stories folder and using configuration from Storybook doesn't understand import on demand for antd components and https://github.com/storybookjs/storybook/issues/3949/
• creating a .babelrc file and import babel import and ant there
• using the same configuration as decribed in Advanced AntD docs: https://ant.design/docs/react/use-with-create-react-app

没有一种方法允许我使用样式渲染 AntD 组件

None of the approaches allows me to render the AntD component with styling

//.stories/webpack.config.js

// .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

// .stories/.babelrc

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

//我的基于 AntDesign 的组件

// my component based on 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>
  );
});

//运行故事书显示:运行故事书的结果

我希望在我的故事书中呈现基于 AntD 的组件，就像在我的 CRA 项目中一样:运行基于 CRA 的项目的结果

I would expect to have the AntD based component rendered in my storybook the same way it is in my CRA project: outcome of running CRA based project

推荐答案

以下是我如何使用 Storybook v6

步骤 1: 为 Ant 设计安装预设.来源

Step 1: Install a preset for Ant design. Source

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

第 2 步: 在您的 .storybook/main.js 中添加上面预设的引用.还要注意@storybook/preset-create-react-app 的选项是如何被覆盖的.

Step 2: In your .storybook/main.js add above preset's reference. Also note how the options of @storybook/preset-create-react-app are overrode.

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 处理了其余的事情，除了这两个之外不需要任何更改，就我而言.

Looks like Storybook 6.0 takes care of rest of the things and no change was required apart from these two, in my case.

这篇关于Storybook 和 AntDesign 组件 - 如何设置 CRA &打字稿?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！