[React] Styled Component (Themes)

노마드코더 리액트 마스터 클래스 #2 STYLED COMPONENT

 

index.js

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import App from "./App";

const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={lightTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

 

App.js

import styled from "styled-components";

const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;
const Wrapper = styled.div`
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background-color: ${(props) => props.theme.backgroundColor};
`;

function App() {
  return (
    <Wrapper>
      <Title>Hello</Title>
    </Wrapper>
  );
}

export default App;

 

theme

 

Styled Component에서 ThemeProvider를 import한다.

 

property들을 가진 object를 ThemeProvider에 theme props를 통해 전달한다. 
그럼 ThemeProvider안에 있는 모든 component들은 이 오브젝트에 접근할 수 있게 된다.

(위의 코드의 경우 App 컴포넌트)
두개의 theme(dark,light) 을 만들고 이 두개의 theme이 동일한 프로퍼티 이름을 갖고 있다면,
theme을 전환해줄 때 컴포넌트를 따로 바꿔줄 필요가 없다. 
Wrapper컴포넌트와 Title 컴포넌트에서는 그냥 theme만 받아온다.