Name: Import Global Stylesheets for all Stories in preview.js
Uploaded: 2021-10-22T01:14:53-05:00
Description: In this lesson, we configure Storybook to load global stylesheets for all stories. This is a great way to get general CSS into all stories and useful practice for adding resets, fonts, and globally shared stylesheets.

Initialize Storybook in a Next.js Project with Webpack 5 Builder

Create Stories for Next.js Pages

Import Global Stylesheets for all Stories in preview.js

Add Controls to Next.js Page Props with Story Args

Configure next/image Component to be Unoptimized

Integrate MSW and Storybook

Mock getServerSideProps and getStaticProps Request with MSW and Storybook Loaders

Integrate Storybook in a Next.js Application

In this lesson, we configure Storybook to load global stylesheets for all stories. This is a great way to get general CSS into all stories and useful practice for adding resets, fonts, and globally shared stylesheets.

https://app.egghead.io/api/v1/lessons/next-js-import-global-stylesheets-for-all-stories-in-preview-js/subtitles

Michael Chan: [0:00] The Next.js starter application comes with some global styles. You can find them in styles/globals.css. We can see that these styles aren't being applied to our stories, because we're getting a different typeface in stories than is declared in the style sheet. We can fix that by adding our global style sheet to .storybook/preview.js.

[0:23] Just go to the top of this file and import that style sheet at styles/globals.css. Hit Save. Let's refresh Storybook. Now our page is getting all of the global styles needed to render this properly. Our preview.js file controls the canvas for all stories. Anything we import here will be imported across all stories.

Import Global Stylesheets for all Stories in preview.js

Share this video with your friends

Course

Integrate Storybook in a Next.js Application