Storybook: Using media queries in decorators

Created on 13 Nov 2019 · 5Comments · Source: storybookjs/storybook

I have the following decorator in my stories:

export default {
    title: 'Components/Button',
    decorators: [storyFn => <div style={{ backgroundColor: 'black', padding: '24px' }}>{storyFn()}</div>],
};

This is because the elements support dark mode out of the box so need a black background when displayed in the Docs...

However I only want this when in Dark Mode...

So I need something like:
~
export default {
title: 'Components/Button',
decorators: [storyFn =>

],
};
~

But it doesn't like that syntax (obviously)... how can you add media queries into the decorator?

react inactive question / support

Source

iamdriz

Most helpful comment

😬 pretty please? ❤️

iamdriz on 28 Nov 2019

👍2 🚀1 🎉1 😄1

All 5 comments

Anyone got any ideas on how to solve this?

iamdriz on 21 Nov 2019

😬 pretty please? ❤️

iamdriz on 28 Nov 2019

👍2 🚀1 🎉1 😄1

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 19 Dec 2019

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 19 Jan 2020

Did you manage to solve this issue?