6 Ways To Configure Global Styles for Storybook | by Jennifer Fu | Mar, 2022

6 background colors that are set by 6 different ways
Image by author
  • Pink background: Use stylesheet in preview-head.html.
  • Chocolate background: Configure previewHead in main.js.
  • Yellow background: Import stylesheet in preview.js.
  • Purple background: Configure previewBody in main.js.
  • beige background: Set style inside preview-body.html.
  • aquamarine background: Configure decorator in preview.js.
npx create-react-app react-storybook
cd react-storybook
Create React App + Storybook folder structure
Image by author
Storybook with the white background
Image by author
Storybook with the pink background
Image by author
The style change does not apply to the document page.
Image by author
The style change applies to the newly converted story page.
Image by author
Storybook with the chocolate background
Image by author
Storybook with the yellow background
Image by author
Storybook with the purple background
Image by author
Storybook with the beige background
Image by author
Storybook with the aquamarine background
Image by author

Leave a Comment