故事书不显示样式

Question

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

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

Answer 1

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

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

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

To control the way stories are rendered and add global decorators and parameters, create a .storybook/preview.js file. This is loaded in the Canvas tab, the “preview” iframe that renders your components in isolation. Use preview.js for global code (such as CSS imports or JavaScript mocks) that applies to all stories.

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$/,
    },
  },
};

故事书不显示样式

Storybook not showing styles

javascript

reactjs

storybook

primereact