故事书和AntDesign组件-如何使用CRA&打字稿? [英] Storybook and AntDesign components - how to set-up with CRA & Typescript?
问题描述
我想用带有Typescript的CRA项目中的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.25 AntDesign-v3.23.2
CRA - v3 Storybook - v5.25 AntDesign - v3.23.2
我成功设置了CRA + AntDesign,设置了Storybook,使用AntD css类在Storybook中渲染了我的AntDesign组件,但是样式丢失了
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 文件,并使用"> 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>
);
});
//运行故事书将显示以下内容: 正在运行的故事书的结果
// running the storybook shows this: outcome of running storybook
我希望故事书中呈现的基于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
推荐答案
在故事书的config.js
文件中导入antd
样式import 'antd/dist/antd.css';
:
Import antd
styles import 'antd/dist/antd.css';
within storybook's config.js
file:
// @ .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支持文档.
这篇关于故事书和AntDesign组件-如何使用CRA&打字稿?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!