4

我有一个在内部使用 Primereact 对话框的对话框组件。当我为此制作故事书时，正在导入按钮的自定义 css，因为它是在 dialog.jsx 中导入的。但是 Primereact 对话框的默认 css 没有加载和反映在故事书中。虽然它正在我的 React 应用程序中加载。

dialogComp.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;

dialog.storybook.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"
  ]
}

我在配置中遗漏了什么吗？

4

2 回答 2

2

您需要App.js通过导入它们来导入您在故事书中全局使用的任何样式.storybook/preview.js（如果该文件尚不存在，则创建该文件）。

React 中的每个组件都是自包含的——你的DialogModal组件不会被样式化，因为在故事书中它没有在你的App组件中呈现（你正在导入你的样式）。

要在使用故事书时模拟您的应用程序，请将其导入preview.js文件中。文档：

要控制故事的呈现方式并添加全局装饰器和参数，请创建一个 .storybook/preview.js 文件。这是在 Canvas 选项卡中加载的，“预览”iframe 会单独呈现您的组件。将 preview.js 用于适用于所有故事的全局代码（例如 CSS 导入或 JavaScript 模拟）。

于 2021-01-11T22:26:48.687 回答
1

在.storybook/preview.js中导入您的样式

import "../src/index.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};
于 2021-11-30T07:58:55.957 回答