How to set css styles on storybook iframes?

@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.