Styled-components - (5)theme

사용하기

1. 불러오기

import { ThemeProvider } from "styled-components";

2. App컴포넌트를 ThemeProvider컴포넌트로 감싸주기

  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>,

3. 사용할 색상 정의하기

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

4. ThemeProvider컴포넌트에 props로 전달하기

 <ThemeProvider theme={ darkTheme }>

5. ThemeProvider컴포넌트 하위에 있는 모든 컴포넌트들은 darkTheme있는 속성들을 사용할 수 있다.

6. 사용시

background-color: ${props => props.theme.backgroundColor};

index.js

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

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

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


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

App.js

import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  width: 1000px;
  height: 1000px;
  justify-content: center;
  align-items: center;
  background-color: ${props => props.theme.backgroundColor};
`;

const Title = styled.h1`
  color: ${(props) => props.theme.textColor}
`;

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

export default App;

darkTheme vs lightTheme

각 테마들의 속성들의 이름을 같게 설정하고 색상만 다르게 정의해주면
아래와 같이 간단하게 테마를 변경할 수 있다.

<ThemeProvider theme={ darkTheme }>

<ThemeProvider theme={ lightTheme }>