How to remove default storybook canvas styles?

@darrion.kuhn 

To remove the default Storybook canvas styles, you can override them with your own custom styles in your Storybook configuration file. Here’s how you can do it:

1. Create a new file called .storybook/preview.js in the root of your project if it doesn’t already exist.
2. In the preview.js file, import the global CSS file where you define your custom styles:

1

import '../path/to/your/custom-styles.css';

1. Define your custom styles in the custom-styles.css file. You can use CSS to target specific elements within the Storybook canvas and override their styles. For example, you can target the .sb-show-main class to apply styles specifically to the Storybook canvas:

1
2
3

.sb-show-main {
  // Add your custom styles here
}

1. Restart your Storybook server to see the changes take effect.

By following these steps, you can remove the default Storybook canvas styles and customize the appearance of the canvas to better suit your needs.