css 전역화 시키기 1️⃣ (ver. ThemeProvider)

[styled-components] ThemeProvider로 공통 스타일 속성 관리하기.

---

프로젝트 중간 리팩토링 과정에서 css 전역화를 하고 싶어졌다.

현재 CSS 관련해서는. css, styled-component, props로 넘기는 3가지 방식을 사용하고 있었기 때문에

 

첫 번째 시도에는 아래와 같은 방식으로 3가지 파트에서 전역화 시키려고 했었다.

• . css → className화
• styled-component → ThemeProvider
• props → Object 상태에서 key 값 받아서 적용

볼수록 더 좋은 방법이 있을 것 같다는 생각에 다음날 엄청나게 찾아보고서 방법을 찾긴 했다. (그건 2️⃣에 있음)

css 전역화 시키기 2️⃣ (ver. :root)

 

index.js 파일에 ThemeProvider 연결하고, theme.js 생성해서 전역화 시킬 css 넣고, styled-components 안에 적용시키면 돼서 따로 설명은 안 적고 코드만 삽입👍

---

React

(React 버전은 Zzz 코드 예시)

index.js

theme.js

styled-compoent에 적용할 때

---

Next.js

- React 버전에서 index.js가 _app.js로 변경되는 것 밖에 없다.