728x90
Theming
styled components는 ThemeProvider wrapper 컴포넌트를 통해 전체 테마를 지원합니다.
주로 다크모드 할때 쓰인다!
이 컴포넌트는 컨텍스트 API를 통해 자체 아래에 있는 모든 React 구성 요소에 테마를 제공합니다.
렌더 트리에서 모든 스타일 구성 요소는 여러 수준의 깊이에 있는 경우에도 제공된 테마에 액세스할 수 있습니다.
ex) ThemeProvider theme={theme}
https://styled-components.com/docs/advanced
styled-components: Advanced Usage
Theming, refs, Security, Existing CSS, Tagged Template Literals, Server-Side Rendering and Style Objects
styled-components.com
ThemeProvider 전체 테마에 적용
import React from "react";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "styled-components";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
const darkTheme = {
textColor: "whitesmoke",
backgroundColor: "#111",
};
const lightTheme = {
textColor: "#111",
backgroundColor: "whitesmoke",
};
root.render(
<React.StrictMode>
<ThemeProvider theme={darkTheme}>
<App />
</ThemeProvider>
</React.StrictMode>
);
reportWebVitals();
darkTheme을 적용했다. 이걸 이제 어떻게 쓰냐?
import { useState } from "react";
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;
이렇게 props를 받아서 쓰면 된다!
darkThem 적용화면
lightTheme 적용화면
728x90
'인터넷 강의 > 노마드 코더' 카테고리의 다른 글
[노마드 코더] Chapter.5 STATE MANAGEMENT (0) | 2022.06.23 |
---|---|
[노마드 코더] Chapter.4 CRYPTO TRACKER (0) | 2022.06.22 |
[노마드코더] Styled-components (0) | 2022.06.20 |