Storybook에 styled-components 적용하기 (theme, GlobalStyle)

Storybook에 styled-components의 theme과 GlobalStyle을 적용해 보자.
기존에 App.tsx 같은 상위 컴포넌트에서 적용하던 방식과 동일하다. Storybook의 preview 설정 파일에서 decorator로 감싸주며 styled-components 요소를 적용해주면 된다.

.storybook/preview.tsx

import React from 'react';
import type { Preview } from '@storybook/react';

//ThemeProvider 가져오기
import { ThemeProvider } from 'styled-components';

//내가 사용할 GlobalStyle, theme 가져오기
import { GlobalStyle } from '../src/styles/global-style';
import GlobalFonts from '../src/assets/fonts';
import { theme as colortheme } from '../src/styles/theme';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

//decorators에 적용하기
export const decorators = [
  (Story) => (
    <ThemeProvider theme={colortheme}>
      <GlobalStyle />
      <GlobalFonts />
      <Story />
    </ThemeProvider>
  ),
];

export default preview;

1. styled-components의 ThemeProvider를 가져온다.

2. 내가 기존에 사용하던 GlobalStyle과 theme을 가져온다.

3. decorators를 만들어 적용해준다.

🚨 주의할 점

• import React from 'react'; 도 필요하다.

• 기본적으로는 .storybook/preview.ts 파일이 만들어져 있을텐데 tsx 문법을 사용하기 때문에 파일 확장자를 .tsx로 바꿔주어야 한다.

다른 방법 - addon 사용하기

Storybook 공식문서에 나와있는 방법으로 @storybook/addon-styling addon을 설치해서 마찬가지로 preview.ts의 decorators에 적용할 수도 있다.

// .storybook/preview.js
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

import { lightTheme } from '../src/themes';

const GlobalStyles = createGlobalStyle`
  body {
    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
`;

export const decorators = [
  withThemeFromJSXProvider({
  themes: {
    light: lightTheme,
  }
  defaultTheme: 'light',
  Provider: ThemeProvider,
  GlobalStyles,
})];