Styled-Components Theme 사용하기

1. CRA로 리액트 프로젝트 생성
2. npm install styled-components

3. import { ThemeProvider } from "styled-components";

index.js에서

<App />

컴포넌트를 ThemeProvider로 감싸준다.

ThemeProvider 는 theme 라는 props를 하나 받는다.

theme props에 넘겨주기 위해 darkTheme 라는 객체를 만들고 넘겨줌!

darkTheme 객체는 글씨색과 배경색 정보가 담긴 객체임!

이렇게 Theme을 설정하는건 쉽다.. 설정을 했으면 사용을 해야겠지?

ThemeProvider의 theme props로 darkTheme 객체를 넘겨줬으므로, 우리 어플리케이션은 이 객체가 가진 "textColor, backgroundColor" 에 접근할 수 있다.

이런식으로 접근할 수 있다!

( 잘 적용된 모습 )