Styled-Component (5) - Themes

Checkpoint

테마를 지정해서 저녁에는 다크테마를, 낮에는 라이트테마를 적용하고자 한다. 그럴 때마다 컴포넌트의 스타일을 일일이 다 변경해줘야 하는 걸까?

Themes

styled-components에서는 ThemeProvider를 제공해준다.
Themes는 기본적으로 모든 색상들을 가지고 있는 Object를 뜻한다.

먼저 index.js에서 import { ThemeProvider } from "styled-components"로 ThemeProvider를 불러와준다. 그 다음에 <App /> 컴포넌트를 <ThemeProvider>로 감싸준다.

그 다음에 적용할 테마를 Object 형식으로 작성하고, <ThemeProvider theme={darkTheme}>으로 해당 테마를 넣어준다.

App.js에서는 ThemeProvider로부터 테마값 props를 넘겨받고, 컴포넌트 내부에서 color: ${(props) => props.theme.textColor}; 형식으로 props와 테마의 key값을 정확하게 입력해줘야 한다.