JS' 공부흔적
[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 태그를 쓰게 되면 위에서 설정한 속성이 기본으로 적용된다.
728x90
반응형