New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Stylesheet Disable
A Storybook add-on that makes it easy to disable stylesheets.
npm install storybook-stylesheet-disable
Last updated 4 months ago
30
Downloads per week
Readme View on GitHub

Storybook Stylesheet Disable

A Storybook add-on that makes it easy to disable stylesheets.

Getting Started

  1. yarn add --dev storybook-stylesheet-disable
  2. Add to your main.js config file:
module.exports = {
  ...,
  addons: [
    ...,
    "storybook-stylesheet-disable"
  ],
  ...,
};
  1. Configure stylesheetId in preview.js within your .storybook directory:
export const globals = {
  ...,
  stylesheetId: 'your-unique-id-here',
  ...,
};
  1. Create a preview-head.html file within your .storybook directory if you don't already have one.
  2. Add the stylesheets you wish to be disabled/enabled via <link> tags, giving each one the same unique identifier as a title attribute:
<link rel="stylesheet" href="./path-to-css-file-1.css" type="text/css" title="my-unique-id">
<link rel="stylesheet" href="./path-to-css-file-2.css" type="text/css" title="my-unique-id">
<link rel="stylesheet" href="./path-to-css-file-3.css" type="text/css" title="my-unique-id">

(This tool can operate in reverse, too, if you wish. Simply add the disabled attribute to the <link> tags.)

  1. Spin up Storybook and you should see a new toolbar button with the < > icon, which will disable/enable the specified stylesheets.
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI