How to set css styles on storybook iframes?

Member

by darion , in category: Javascript , a year ago

How to set css styles on storybook iframes?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by aniya.jaskolski , a year ago

@darion 

You can set CSS styles on Storybook iframes by creating a global CSS file for your Storybook project.

  1. Create a file named global.css in your Storybook project's .storybook directory.
  2. Add your custom CSS styles to the global.css file. For example:
1
2
3
4
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}


  1. Import the global.css file in your Storybook's preview.js file. Add the following line at the top of the preview.js file:
1
import '../.storybook/global.css';


  1. Save your changes and restart your Storybook server. The custom CSS styles should now be applied to all the iframes in your Storybook project.


You can also target specific components or stories by adding CSS classes or IDs to your components and styling them individually in the global.css file.

Related Threads:

How to remove default styles in storybook?
How to remove default storybook canvas styles?
How to render global styles from styled-components in storybook?
How to set and use a variable with iframes?
How to add specific styles to classname in tailwind css?
How to set up storybook alias?