Styled-components - (5)theme

starkdy·2021년 11월 25일
0

스타일컴포넌트

목록 보기
5/5

사용하기

  1. 불러오기

import { ThemeProvider } from "styled-components";

  1. App컴포넌트를 ThemeProvider컴포넌트로 감싸주기
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  1. 사용할 색상 정의하기
const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111"
}
  1. ThemeProvider컴포넌트에 props로 전달하기
 <ThemeProvider theme={ darkTheme }>
  1. ThemeProvider컴포넌트 하위에 있는 모든 컴포넌트들은 darkTheme있는 속성들을 사용할 수 있다.

  2. 사용시

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 }>

profile
Front-end web developer challenge

0개의 댓글