Package Exports

@storybook/addon-styling
@storybook/addon-styling/dist/cjs/index.js
@storybook/addon-styling/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@storybook/addon-styling) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@storybook/addon-styling`

Get started in Storybook faster with popular styling tools.

Toggling between themes

✨ Features

🧩 Configuration templates for popular tools
🎨 Provide themes
🔄 Toggle between multiple themes when more than one is provided
❗️ Override theme at the component and story level through parameters

🏁 Getting Started

To get started, install the package as a dev dependency

yarn:

yarn add -D @storybook/addon-styling

npm:

npm install -D @storybook/addon-styling

pnpm:

pnpm add -D @storybook/addon-styling

Then, include the addon in your .storybook/main.js file

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-essentials",
+   "@storybook/addon-styling"
  ],
};

👇 Tool specific configuration

For tool-specific setup, check out the recipes below

Don't see your favorite tool listed? Don't worry! That doesn't mean this addon isn't for you. Check out the "Writing a custom decorator" section of the api reference.

❗️ Overriding theme

If you want to override your theme for a particular component or story, you can use the theming.themeOverride parameter.

import React from "react";
import { Button } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    theming: {
      themeOverride: "light", // component level override
    },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: "Button",
};

export const PrimaryDark = Template.bind({});
PrimaryDark.args = {
  primary: true,
  label: "Button",
};
PrimaryDark.parameters = {
  theming: {
    themeOverride: "dark", // Story level override
  },
};

🤝 Contributing

If you'd like to contribute to this addon, THANK YOU, I'd love your help 🙏

📝 Development scripts

yarn start runs babel in watch mode and starts Storybook
yarn build build and package your addon code