# 글로벌 스타일 적용

## [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 컴포넌트를 개발자 도구 스타일을 확인해보니 글로벌 스타일이 적용된 것을 확인 할 수 있다. ](/files/-MW3aTxG_iLLTfUX5D7e)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/react/story-book/undefined.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
