> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/story-book/undefined.md).

# 글로벌 스타일 적용

## [Global decorators ](https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators)

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

[Global decorators ](https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators)를 설정하는 방법이다. &#x20;

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

```javascript
// .storybook/preview.js

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

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

```

![story 컴포넌트를 개발자 도구 스타일을 확인해보니 글로벌 스타일이 적용된 것을 확인 할 수 있다. ](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW3aFBPjDoKyM1ZT2h0%2F-MW3aTxG_iLLTfUX5D7e%2Fimage.png?alt=media\&token=e6a26bd0-8f7c-4b90-abed-d061546f5494)
