노마드코더 리액트 마스터 클래스 #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만 받아온다.
'FRONT > REACT' 카테고리의 다른 글
[React] React.memo 사용법 (0) | 2022.02.16 |
---|---|
타입스크립트 React.FormEvent (0) | 2022.01.22 |
[React] Styled Component(As, Attr) (0) | 2022.01.20 |
[React] Styled Component (컴포넌트 확장) (0) | 2022.01.19 |
[React] Styled Component 사용하기 (0) | 2022.01.19 |