글로벌 스타일 적용

Global decorators

첫 컴포넌트 생성 중 storybook에 글로벌 스타일이 적용되지 않은 것을 확인했다. 공식 문서에 보니 친히 어떻게 하라고 하는지 알려준다.

Global decorators 를 설정하는 방법이다.

styled-component로 글로벌 스타일을 적용하는 방식 그대로 적용하면 된다.

// .storybook/preview.js

import React from 'react'
import { GlobalStyles } from '../src/styles/GlobalStyles'j

// 클로벌 스타일 적용
export const decorators = [
  (Story) => (
    <>
      <GlobalStyles />
      <Story />
    </>
  ),
]

story 컴포넌트를 개발자 도구 스타일을 확인해보니 글로벌 스타일이 적용된 것을 확인 할 수 있다.