[styled-components] 전역 스타일 적용하기 (createGlobalStyle)

개발을 하다 보면 프로젝트 전체에 기본적으로 적용하고 싶은 스타일이 있을 것이다. 예를 들어 나의 경우에는 button 태그를 스타일링 할 때 아예 처음부터 커스텀하고 싶어서 all: unset;을 주고 시작한다. 이때 all: unset;을 button 태그마다 모두 써줘야한다. 또한, hover 시에 포인터 커서가 되도록 모든 button에 설정해야 한다. 이런 귀찮음을 방지하기 위해서 전역 스타일 적용이 필요한데, styled-components에서는 createGlobalStyle를 사용하면 된다.

 

우선 전역 스타일을 작성할 파일 하나를 만든다. 나의 경우, src\style\global\ 경로에 파일을 만들었다. createGlobalStyle은 일반적으로 styled-components를 사용하는 것과 유사하다. 모든 button 태그에 all: unset;과 포인터 커서를 적용하는 경우에 아래와 같이 작성한다.

// index.ts

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
button {
    all:unset;
    &:hover {
        cursor: pointer;
    }
}
`;

export default GlobalStyle;

 

그리고 최상단 컴포넌트에 가서 위에서 작성한 GlobalStyle을 불러온다.

// App.tsx

import GlobalStyle from "./style/global";

...

const App = () => {
  return (
    <>
        <GlobalStyle />
        <BrowserRouter>
          ...
        </BrowserRouter>
    </>
  );
}

 

이제 이 프로젝트 내에서 button 태그를 쓰게 되면 위에서 설정한 속성이 기본으로 적용된다.