ThemeProvider 사용하기(1) - 기본 문법

이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다.

 

🔗링크

https://www.udemy.com/course/react-styled-components/

React styled components v5 (2021 edition)

 

 

 

 

 

 

 

1.

styled-components에서 ThemeProvider를 import한다.

import { ThemeProvider } from "styled-components";

 

 

 

 

2.

ThemeProvider 컴포넌트를 가장 상위 컴포넌트로 

(GlobalStyle보다 위에)

 

function App() {
	return (
		<ThemeProvider>
			<GlobalStyle />
			<BrowserRouter>
				<Switch>
					<Route path="/login">
						<LogIn />
					</Route>
					<Route path="/">
						<Home />
					</Route>
				</Switch>
			</BrowserRouter>
		</ThemeProvider>
	);
}

 

 

 

3.

theme이라는 이름을 가진 비어있는 객체를 만든다.

const theme = {}

 

 

 

 

4. 

위에서 생성한 theme 객체를 ThemeProvider의 props로 넣어준다.

function App() {
	return (
		<ThemeProvider theme={theme}>
			<GlobalStyle />
			<BrowserRouter>
				<Switch>
					<Route path="/login">
						<LogIn />
					</Route>
					<Route path="/">
						<Home />
					</Route>
				</Switch>
			</BrowserRouter>
		</ThemeProvider>
	);
}

 

이렇게 해주면

styled-components가 모든 컴포넌트에 이 theme 변수를 inject해준다!

 

 

 

 

5.

원하는 theme 작성하기

(Object니까 camelCase)

const theme = {
	primaryColor: "#f8049c",
	secondaryColor: " #fdd54f",
};

색깔을 넣어봤다!

 

그러면 이제부터 hex 값을 넣어주는 대신에

hex 값을 넣었던 자리에

${props => props.theme.primaryColor}

이런 식으로 넣어주면 된다.

 

 

 

 

 

🌞 예시

background-color: ${(props) =>
	props.secondary
		? props.theme.secondaryColor
		: props.theme.primaryColor};

 

border-bottom: 3px solid ${(props) => props.theme.secondaryColor};

 

const HeaderWrapper = styled.header`
	box-sizing: border-box;
	display: flex;
	height: 60px;
	width: 100%;
	padding: 0 16px;
	position: fixed;
	top: 0;
	background-image: linear-gradient(
		to right,
		${(props) => props.theme.primaryColor},
		${(props) => props.theme.secondaryColor}
	);
	border-bottom: 3px solid #fdd54f;
`;