전역 Styled Components (Global Style)

Styled Component를 이용해 styled을 주는 방법을 이전 포스팅에서 알아보았을것이다.

Styled-Components 에 대해서 – 최정재 (flen-e.github.io)

이번 포스팅에서는 Styled Components를 이용하여 Global Styled를 주는 방법에 대해 알아보겠다.

Reset-CSS

기본적으로 react를 짜면 padding,border,margine과 font-size ul li 스타일 등 제공이 되어있는데
이를 어느 정도 초기화를 해주기 위해 reset-css를 가져오겠다.

해당 사이트에 들어가면 reset-css 를 쉽게 얻을 수 있다.

Styled-Components

style을 Global로 적용시키는 것은 어렵지않다.
이전에 배운 styled-component 라이브러리를 사용 할 줄 안다면 금방 할 것이다.

npm install --save styled-components
npm install @types/styled-components

npm 설치 명령어를 통해 styled-component를 설치 해준후
createGlobalStyle이라는 것을 import 하여 사용해주면 된다.

그리고 적용하려는 대상에 적용시켜주면된다.

return(
	<GlobalSytle/>
	<Router/>
)

같이 두 개의 Element 를 보내고 싶다면 보통은

return(
	<div>
		<GlobalSytle/>
		<Router/>
	</div>
)

div를 이용하여 return하여주었겠지만 이런식으로 사용한다면 쓸모없는 div로 도배될 것이다.
그래서 우리는 이거 대신에 Fragment <></> 를 이용해 줄 것이다.

이제 적용하고 보면 App안에 Element에 GlobalStyle이 적용된 것을 확인 할 수 있을 것이다.

Font도 바꿔보자

body안에 들어갈 Font들도 Global Style로 적용해 볼것인데,

Browse Fonts - Google Fonts

해당 사이트를 이용하면 다양한 폰트들을 무료로 이용할 수 있다.

원하는 Font를 클릭하면 이런식으로 다운을 받을 수 있는데 원하는 크기를 + 버튼을 눌러 넣어주고 우측을 보면

use on the web 박스가 있는데 말고 @import를 눌러준후 style을 복사해주자.
그리고 아까 만들어두었던 GlobalStyle에 @import해주면 된다.

@import를 복사하여 넣어준뒤 해당 폰트를 쓸 곳에 (나는 body에 적용해주었다.)

해당 font-family를 복사하여 넣어주면 된다.
위에 GlobalStyle은 reset-css와 font를 @import 해준뒤 body에 적용시킨 모습이다.

Theme도 설정해주자

Styled.d.ts

styled.d.ts 라는 타입 선언 파일을 생성해주자.
~.d.ts파일은 해당 객체 또는 함수의 타입을 추론을 도와주는 유용한 파일로
TypeScript는 해당 함수의 타입을 정의해 주어야 하는데 한데 모아서 정리해준다고 생각하면 좋을 것 같다.

기본적으로 DefaultTheme 는 비어있는 상태인데 이곳에 공통적으로 사용되는
스타일들을 묶어서 일관성을 유지할 수 있게 해준다.

DefaultTheme 적용