Storybook not showing styles

Question

I have a dialog component which is using the Primereact dialog internally. When I make a storybook for the same, the custom css for button is being imported as it is imported inside dialog.jsx. But the default css of Primereact dialog is not loading and reflecting in the storybook. Although it is being loaded in my React app.

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;

storybook---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"
  ]
}

Am I missing something in the configuration?

Missionary

Are you importing primereact css files in your App component? You’ll need to do the same in storybook, when rendering the child. – Datolite

Any luck? I can help explain how to add the styling to storybook. – Datolite

Thanks @JBallin. I was importing custom CSS in App.js, imported the same in custom component, it worked. Is there any workaround to load CSS from other .js/.jsx file via configuration. – Missionary

Hey just added some more information in an answer, let me know if that helps. – Datolite

Answer 1

You'll need to import any styles you use in App.js globally in Storybook, by importing them in .storybook/preview.js (create the file if it doesn't already exist).

Every component in React is self contained - your DialogModal component won't get styled because in Storybook it is not being rendered within your App component (where you're importing your styles).

To simulate your app when using Storybook, you import the css in a preview.js file.

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.

Datolite

Answer 2

TL;DR

import your styles in .storybook/preview.js

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

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

Roid

Answer 3

If you use storybook and emotion, and if you implement Global styles or Theming, you may add a decorator into the .storybook/preview.js like this: I'm using Create React App, therefore I'm using 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]

You may find more information on: https://storybook.js.org/docs/react/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation

Rebarbative