GlobalStyle과 Theme 사용하기 (typescript를 곁들인)

저번 과제에서는 CSS를 만 질 일이 없기도 했고 아침 11시까지 과제를 하다가 하루 종일 잠에 빠져버려 복습을 안 했다.

그래서 이번 과제에서 globalstyle과 theme 사용을 처음 해봤는데 theme는 유지 보수할 때 정말 좋아 보인다.

---

GlobalStyle

• styled.createGlobalStyle로 글로벌로 쓸 컴포넌트를 만들어 준다.
• yarn add styled-reset을 이용해 기본적인 글로벌 스타일을 제거하고 위와 같이 코드를 입력해준다.
• 폰트도 설정할 수 있고, h1, p 값 등의 크기도 조절할 수 있다.

• index.tsx에 위와 같이 쏵 깔아주면 글로벌 스타일 적용 완성!

 

Theme

예전부터 적용해봐야지 적용해봐야지 하다가 이제야 적용해본다. 이 좋은걸 왜 여태까지...

TypeScript에서 사용하기 위해선 styled.d.ts 파일을 만들어 타입을 정해줘야 한다.

styled.d.ts

• 원래 모듈 속 DefaultTheme의 값은 비어있다. 따라서 쓸 값들을 직접 채워줘야 한다. 안 적어주면 타입 에러남!!
• 위와 같이 쓸 것들의 타입을 미리 정해준다.

theme.ts

• 1 rem = 16px로 두고 쓸 값들을 적어주었다.
• import {DefaultTheme}을 한 뒤 타입을 붙여주는 게 중요하다.

• Theme를 사용할 곳을 감싸주고, theme={theme}를 넣어주면 끝!!

 

사용법은 간단하다.

• ${({theme}) => } 이런 식으로 지정해놓은 값들을 불러와서 쓰면 된다.