[React] React GlobalStyle

리액트에서 CSS 스타일을 주는 방법으로 Styled-component 를 주로 사용한다.

styled-components 의 createGlobalStyle 을 페이지에 적용하는
방법을 알아보자.

 

ResetStyle.ts

import { css } from "styled-components";
export const ResetStyle = css`
  a {
    color: inherit;
    text-decoration: none;
  }

  a:focus {
    outline: 0;
  }

  a:active,
  a:hover {
    outline: 0;
  }
`

 

style 경로를 만들고 초기 설정할 디자인(reset.css)을 만든다. 여기서 정해준 CSS 요소는 전체 페이지에 들어갈 요소이다.

 

globalStyle.ts

import { createGlobalStyle } from "styled-components";
import { ResetStyle } from "./reset";

export const GlobalStyle = createGlobalStyle<{ theme: Theme }>`
${ResetStyle};
html {
  height: 100%;
}

`

 

같은 경로에 globalStyle.ts 파일을 만들고 createGlobalStyle 을 가져온다. 이 녀석은 어플리케이션 레벨 스타일링을 하는 녀석이다. 우리가 컴포넌트 안에서 styled-component 로 만든 녀석들처럼 개별적으로 동작하는 게 아닌, 최상위 컴포넌트에서 이 녀석을 정의해두면 모든 컴포넌트에 해당 스타일이 적용된다. 여기에 우리가 reset 에 만든 ResetStyle 을 지정해준다.

 

 

App.js

import { GlobalStyle } from "./styles/globalStyles.ts";

function App() {
    return (
      <BrowserRouter>
      	<GlobalStyle />
      	<header>
      		<p>
   		   	헬로우
	      	</p>
   	   	</header>
      </BrowserRouter>

 

페이지의 최상단인 App 에서 위에서 만든 GlobalStyle 을 넣어주면, App 에서 라우터를 타는 모든 컴포넌트에 전역 디자인을 넣을 수 있게 된다

▶ 마치며

위 방법을 사용해서 서비스에 다크 모드와 라이트 모드를 만들 수 있다.
하나씩 배워가는 재미가 중요하다.