故事书未显示样式

Posted 2023-02-19

【中文标题】故事书未显示样式

【英文标题】：Storybook not showing styles

【发布时间】：2021-04-02 15:58:39

【问题描述】：

我有一个在内部使用 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"
  ]

我是否在配置中遗漏了什么？

【问题讨论】：

您是否在您的 App 组件中导入 primereact css 文件？在渲染子节点时，您需要在 storybook 中执行相同操作。

运气好吗？我可以帮助解释如何将样式添加到故事书中。

谢谢@JBallin。我在 App.js 中导入自定义 CSS，在自定义组件中导入相同的 CSS，它起作用了。是否有任何解决方法可以通过配置从其他 .js/.jsx 文件加载 CSS。

嘿，刚刚在答案中添加了更多信息，如果有帮助，请告诉我。

【参考方案1】：

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

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

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

【参考方案2】：

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

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

要在使用故事书时模拟您的应用，请将其导入preview.js 文件。 Docs:

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