故事书不显示风格

Question

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

对话框Comp.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;

对话.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"
  ]
}

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

Answer 1

您需要导入App.jsStorybook 中全局使用的任何样式，方法是导入它们.storybook/preview.js（如果文件尚不存在，则创建该文件）。

\n

React 中的每个组件都是自包含的 - 你的DialogModal组件不会被设置样式，因为在 Storybook 中它不会在你的App组件中渲染（你在其中导入样式）。

\n

要在使用 Storybook 时模拟您的应用程序，您可以在文件中导入 css preview.js。

\n

文件：

\n

\n

要控制故事的渲染方式并添加全局装饰器和\n参数，请创建一个 .storybook/preview.js 文件。它被加载到\nCanvas 选项卡、\xe2\x80\x9cpreview\xe2\x80\x9d iframe 中，该 iframe 在隔离中呈现组件。将 Preview.js 用于适用于所有故事的全局代码（例如CSS 导入或\nJavaScript 模拟）。

\n

\n

Answer 2

长话短说

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

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

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};