我有一个对话框组件,它在内部使用Primeract对话框。当我为它制作故事书时,按钮的自定义css被导入dialog. jsx中。但是Primeract对话框的默认css没有加载和反映在故事书中。尽管它被加载到我的React应用程序中。
对话框组件jsx
import { Dialog } from "primereact/dialog";
const DialogComp = (props) => {
return (
<Dialog
className="dialog-modal"
header={props.header}
visible={true}
>
{props.children}
</Dialog>
);
};
export default DialogModal;
对话框.故事书.js
import React from "react";
import DialogModal from "./dialogComp";
import { addDecorator, addParameters } from "@storybook/react";
import { Store, withState } from "@sambego/storybook-state";
import { store } from "./../../utils/storyStore";
const DialogModalComp = (props) => {
return [
<div>
<DialogModal
header="Dialog Modal"
displayModal={true}
>
Modal content
</DialogModal>
</div>,
];
};
addDecorator(withState());
addParameters({
state: {
store,
},
});
export default {
title: "dialog",
};
export const DialogModalComponent = () => DialogModalComp;
故事书---main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app"
]
}
我是否遗漏了配置中的某些内容?
3条答案
按热度按时间wqsoz72f1#
您需要将在
App.js
中使用的任何样式全局导入Storybook中,方法是将它们导入.storybook/preview.js
(如果文件不存在,请创建该文件)。React中的每个组件都是自包含的-您的
DialogModal
组件不会得到样式,因为在Storybook中,它没有在您的App
组件(您导入样式的地方)中渲染。要在使用Storybook时模拟您的应用,您可以导入
preview.js
文件中的css。文件:
要控制故事的呈现方式并添加全局装饰器和参数,请创建一个. storybook/preview.js文件。该文件加载在Canvas选项卡中,"preview" iframe用于单独呈现组件。使用preview.js可获得应用于所有故事的全局代码(如CSS导入或JavaScript模拟)。
v6ylcynt2#
TL;DR
在 .storybook/preview.js 中导入样式
bn31dyow3#
如果你使用故事书和情感,并且你实现了全局样式或主题化,你可以像这样在. storybook/preview.js中添加一个装饰器:我使用的是Create React应用程序,因此我使用的是jsxImportSource
您可以在以下网站找到更多信息:https://storybook.js.org/docs/react/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation