import { ThemeProvider } from "styled-components";
<React.StrictMode>
<ThemeProvider>
<App />
</ThemeProvider>
</React.StrictMode>,
const darkTheme = {
textColor: "whitesmoke",
backgroundColor: "#111"
}
<ThemeProvider theme={ darkTheme }>
ThemeProvider컴포넌트 하위에 있는 모든 컴포넌트들은 darkTheme있는 속성들을 사용할 수 있다.
사용시
background-color: ${props => props.theme.backgroundColor};
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')
);
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;
각 테마들의 속성들의 이름을 같게 설정하고 색상만 다르게 정의해주면
아래와 같이 간단하게 테마를 변경할 수 있다.
<ThemeProvider theme={ darkTheme }>
<ThemeProvider theme={ lightTheme }>