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

🌲 Branch structure

next - the next version on npm, and the development branch where most work occurs
main - the latest version on npm and the stable version that most users use

🚀 Release process

All PRs should target the next branch, which depends on the next version of Storybook.
When merged, a new version of this package will be released on the next NPM tag.
If the change contains a bugfix that needs to be patched back to the stable version, please note that in PR description.
PRs labeled pick will get cherry-picked back to the main branch and will generate a release on the latest npm tag.

Keywords

FAQs

What is @storybook/addon-styling?

Is @storybook/addon-styling popular?

Is @storybook/addon-styling well maintained?

Package last updated on 09 Aug 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@storybook/addon-styling