在每个故事的故事书中应用不同的主题

Question

I am making a library of react components in storybook (v6.1.14)

I have two different themes, basically and light and dark version.
I wrap all of my stories in the <ThemeProvider> like this:

import React from "react"
import {dark} from "../src/Themes/Theme";
import { ThemeProvider } from "styled-components";
import { GlobalStyles } from "../src/lib/Themes";

// apply our projects theme to our stories
const ThemeDecorator = storyFn => (
  <ThemeProvider theme={dark}>
        <GlobalStyles />
        {storyFn()}
    </ThemeProvider>
)

export default ThemeDecorator;

This is applied through the preview.js file like so:

const { addDecorator } = require("@storybook/react");
import ThemeDecorator from "./themeDecorator"

// Add our project theme, add a global stylesheet
addDecorator(ThemeDecorator);

So now everything has the dark theme applied, however, for each component I want to show two stories: One for the light theme and one for the dark theme - how do I make a story take on a different theme to the one globally declared?

Answer 1

I had the same problem as well. From the Storybook docs, I found this answer .

So basically, you can use decorators with your template and apply styling to it.

const Template: Story<LogoProps> = (args) => {
  const { version } = args;
  return <Logo {...args} version={version} />;
};

export const Light = Template.bind({});
Light.args = {
  version: 'light',
};
Light.decorators = [
  (LightLogo) => (
    <div style={{ backgroundColor: 'black', padding: '5px 7px' }}>
      <LightLogo />
    </div>
  ),
];