Storybook not showing styles

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?

Answer

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.