React - Theming , styled-component ThemeProvider 사용법

React - Theming , styled-component ThemeProvider

리액트 테밍 하기. 스타일 컴포넌트의 테마프로바이더를 이용한 방법

#1. theme 만들기

결과적으로 문자열이 담긴 obj를 반환하면 된다.

그러기에 색깔이 담긴 obj를 theme obj에 spread 해서 넣어줬고

css from styled-components 을 통해, 간단한 css 적용후에 바로 사용할수있도록

theme에도 넣어줬다.

import { css } from "styled-components";

const colors = {
  whiteColor: "#ffffff",
  pupleColor: "#2f2051",
  darkColor: "#000000",
  grayColor: "#e2e2e2",
  logoImage:
    "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQyh9TdQEqj0yVLlMJ4RY_2oKI6etWTg23olNPMItjoMQEBEpJD",
  tmpImage: "https://icon.foundation/resources/image/og-img.png"
};

const puplebox = css`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${colors.pupleColor};
  color: ${colors.whiteColor};
`;

const theme = {
  ...colors,
  puplebox
};

export default theme;

 

#2. ThemeProvider넣주기

Provider라면 바로 그거다.! 아폴로프로바이더, 등등 같은 맥락으로, 모든 컴포넌트에 변수가 녹아 들어간다.

import React from "react";
import Router from "./Router";
import GlobalStyles from "./GlobalStyles";
import theme from "../styles/theme";
import { ThemeProvider } from "styled-components";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Router />
      <GlobalStyles />
    </ThemeProvider>
  );
}
export default App;

#3. Theme 사용하기 in 스타일 컴포넌트

#3.1 아싸리, css 배경색,색 등등 한번에 넣기

  .login__start {
    width: 245px;
    height: 48px;
    margin-top: 12px;
    ${props => props.theme.puplebox}
  }
  //-------------------------------
      <div className="login__start">구글로 시작</div>
    <div className="login__start">페이스북 시작</div>
    <div className="login__start">카카오톡 시작</div>

#3.2 그냥 해당 value만 넣기

  .login__logo {
    width: 120px;
    height: 119px;
    background-image: url(${props => props.theme.tmpImage});
    background-position: center;
    background-size: cover;
  }
  //-------------------------------
    <div className="login__logo"></div>

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA