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

6 background colors that are set by 6 different ways
Picture by writer
  • Pink background: Use stylesheet in preview-head.html.
  • Chocolate background: Configure previewHead in most important.js.
  • Yellow background: Import stylesheet in preview.js.
  • Purple background: Configure previewBody in most important.js.
  • Beige background: Set type 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
Picture by writer
Storybook with the white background
Picture by writer
Storybook with the pink background
Picture by writer
The style change does not apply to the document page.
Picture by writer
The style change applies to the newly converted story page.
Picture by writer
Storybook with the chocolate background
Picture by writer
Storybook with the yellow background
Picture by writer
Storybook with the purple background
Picture by writer
Storybook with the beige background
Picture by writer
Storybook with the aquamarine background
Picture by writer

More Posts