Storybook 需要导出默认的 Ant Design 组件以应用样式
Posted
技术标签:
【中文标题】Storybook 需要导出默认的 Ant Design 组件以应用样式【英文标题】:Storybook requires default Ant Design component to be exported for styling to be applied 【发布时间】:2020-02-21 14:23:25 【问题描述】:我希望使用 Ant Design 设计我的一些 React 组件并在 Storybook 中记录它们。
故事书和组件均正确编写且工作正常。
modal.stories.js
import React from "react";
import action from "@storybook/addon-actions";
import Button from "@storybook/react/demo";
import BasicModal from "./BasicModal";
import Modal from "antd"; // IF I REMOVE THIS ANT DESIGN DOESN'T APPLY.
export default
title: "Modals"
;
export const basicModal = () => <BasicModal visible=true />;
export const basicModal2 = () => <Modal visible=true />; //IF I REMOVE THIS ANT DESIGN DOESN'T APPLY.
BasicModal.tsx
import React, ReactNode from "react";
import Modal from "antd";
interface BasicModalProps
export const BasicModal: React.FC<BasicModalProps> = () =>
return (
<Modal
title="Basic Modal"
visible=true
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
);
;
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, "../")
]
;
但是,我遇到了将样式应用于modal.stories.js
的问题。如果我不包含 import modal from 'antd'
并使用 Modal
组件导出常量,我的 自己的 样式组件将不会应用 ant 设计样式。
在上面的例子中,我得到了两个模态框 basicModal
和 basicModal2
都由 ant-design 设计。但是,如果我注释掉 basicModal2
,basicModal
将恢复为默认 CSS 样式。
有没有办法解决这个问题,而无需在每个故事中添加默认的 Ant Design 组件?
【问题讨论】:
【参考方案1】:故事书 v6
进入(或创建).storybook/preview.js
并将import 'antd/dist/antd.css';
添加到顶部。
例如.storybook/preview.js
import 'antd/dist/antd.css';
export const parameters =
actions: argTypesRegex: '^on[A-Z].*' ,
;
【讨论】:
但是如何从 .less 文件中修改主题变量呢? 对我不起作用。它仍然说: ./node_modules/antd/dist/antd.css 中的错误 13:6 模块解析失败:意外令牌 (13:6) 您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理这个文件。见webpack.js.org/concepts#loaders【参考方案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);
请参阅 CSS Support storybook
文档。
【讨论】:
以上是关于Storybook 需要导出默认的 Ant Design 组件以应用样式的主要内容,如果未能解决你的问题,请参考以下文章
NX - 带有 Storybook 和单独导出组件的 UI 库
如何导出在 storybook 中创建的 React Native 组件以便在实际应用中使用?