search

tonai / storybook-addon-themes

MIT License
83 stars 30 forks source link

Setting theme classes from inside story #59

Open sney-js opened 3 years ago

sney-js commented 3 years ago

Suppose one of my theme class is theme-twitter. Using the dropdown from this plugin works great.

However, I also have a button inside my story that can add/remove theme-twitter from dom on body tag. The moment the class gets added, this plugin removes the added class from the body.

I understand I can provide root, or body etc, but I want to keep body tag. I want to be able to modify body classes from within story without this plugin overwriting it as it sees fit. How can I achieve that?

tonai commented 3 years ago

If the logic of adding the updating the body class is inside the component, you might not want to change it to adapt the behaviour for storybook. Then this way, it is probably incompatible.

One possible way would be to extract the logic from your component and add a onThemeChange props in your component. In your app the logic will be handled by the parent. In Storybook it will be handled by a wrapper component that will update the theme in the addon. For now it is not possible to set the theme from outside, but if this feature is added, you will should also need to adapt your component.