Styled-Component: Theme

jhplus13·2022년 2월 25일
0

React

목록 보기
11/28

🔶 Styled-Component에서 Theme을 이용해 타크모드<->라이트모드 바꾸기

  • index.js
 // 1. ThemeProvider를 import함
import styled, { ThemeProvider } from "styled-components";
import PracThemeApp from "./prac-theme";

// 4.theme={darkTheme} 만 darkTheme<->lightTheme 이 둘중으로 바꾸면 배경색,글자색이 자동으로 다 바뀜.
//   (Wrapper 컴포넌트에서 일일히 색을 바꾸지 않아도 되는 것임.)
const darkTheme = {
  bgColor: "black",
  txtColor: "white",
};

const lightTheme = {
  bgColor: "white",
  txtColor: "black",
};

ReactDOM.render(
  <React.StrictMode>
   // 2.<ThemeProvider>안에 app컴포넌트를 주고, theme prop을 설정해줌
    <ThemeProvider theme={darkTheme}>
      <PracThemeApp />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
  • PracThemeApp.js
import styled from "styled-components";

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  background-color: ${(props) => props.theme.bgColor};
  color: ${(props) => props.theme.txtColor};
`;

// 3.이후 app컴포넌트 안에 있는 모든 컴포넌트에서, 이 theme prop을 갖다 쓸 수 있는 것임.
function PracThemeApp() {
  return <Wrapper>Hello</Wrapper>;
}

export default PracThemeApp;
profile
Front-end Dev

0개의 댓글