Javascript 故事书不显示样式

我有一个对话框组件，它在内部使用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;

---

配置中是否缺少某些内容？

您需要在storybook中全局导入您在

App.js

中使用的所有样式，方法是在

.storybook/preview.js

中导入它们（如果文件不存在，请创建该文件）

React中的每个组件都是自包含的-您的

DialogModal

组件不会被设置样式，因为在storybook中，它不会在您的

应用程序

组件（您导入样式的地方）中呈现

要在使用storybook时模拟应用程序，请将其导入

preview.js

文件中：

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

---

您是否正在应用程序组件中导入css文件？在渲染孩子时，你也需要这样做。运气好吗？我可以帮助解释如何将样式添加到故事书中。谢谢@JBallin。我在App.js中导入了自定义CSS，在自定义组件中导入了相同的CSS，效果很好。有没有办法通过配置从其他.js/.jsx文件加载CSS。嘿，刚才在回答中添加了更多信息，如果有帮助，请告诉我。

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;

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}