javascript 故事书不显示样式

kcrjzv8t  于 2023-01-16  发布在  Java
关注(0)|答案(3)|浏览(136)

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

对话框组件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;

对话框.故事书.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"
  ]
}

我是否遗漏了配置中的某些内容?

wqsoz72f

wqsoz72f1#

您需要将在App.js中使用的任何样式全局导入Storybook中,方法是将它们导入.storybook/preview.js(如果文件不存在,请创建该文件)。
React中的每个组件都是自包含的-您的DialogModal组件不会得到样式,因为在Storybook中,它没有在您的App组件(您导入样式的地方)中渲染。
要在使用Storybook时模拟您的应用,您可以导入preview.js文件中的css。
文件:
要控制故事的呈现方式并添加全局装饰器和参数,请创建一个. storybook/preview.js文件。该文件加载在Canvas选项卡中,"preview" iframe用于单独呈现组件。使用preview.js可获得应用于所有故事的全局代码(如CSS导入或JavaScript模拟)。

v6ylcynt

v6ylcynt2#

TL;DR

.storybook/preview.js 中导入样式

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

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

bn31dyow3#

如果你使用故事书和情感,并且你实现了全局样式或主题化,你可以像这样在. storybook/preview.js中添加一个装饰器:我使用的是Create React应用程序,因此我使用的是jsxImportSource

/** @jsxImportSource @emotion/react */
import { Global } from '@emotion/react'
import { GlobalStyles } from '../src/styles'

const withGlobalProvider = (Story) => (
  <>
    <Global styles={GlobalStyles} />
    <Story />
  </>
)
export const decorators = [withGlobalProvider]

您可以在以下网站找到更多信息:https://storybook.js.org/docs/react/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation

相关问题