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

Question

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

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

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

我试过

• 在.stories文件夹中创建webpack.config.js文件，并使用Storybook中的配置；不了解antd组件的按需进口https://github.com/storybookjs/storybook/issues/3949/
• 创建一个.babelrc文件并在其中导入babelimport和ant
• 使用与Advanced AntD文档中描述的相同配置：https://ant.design/docs/react/use-with-create-react-app

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

//.stores/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, "../")
}
]
}
};

//.stores/.babelrc

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

//基于AntDesign 的my组件

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的项目的结果

Answer 1

以下是我如何使用Storybook v6

步骤1:为Ant设计安装一个预设。源

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

第二步：在你的.storybook/main.js中添加上面预设的参考。还要注意@storybook/preset-create-react应用程序的选项是如何被覆盖的。

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处理了其余的事情，在我的情况下，除了这两个之外，不需要任何更改。

Answer 2

在故事书的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);

请参阅storybook文档中的CSS支持。