[React] ThemeProvider

0. index.js 에서 ThemeProvider import.
   import { ThemeProvider } from 'styled-components';
   ThemeProvider를 적용한 컴포넨츠를 ThemeProvider 하위에 두기.

// index.js
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

1. ThemeProvider에 'theme' props추가.
   ThemeProvider 하위 컴포넌츠에서 theme props에 property 이름으로 접근 가능.

const darkTheme = {
  textColor:"whitesmoke",
  backgroundColor:"#111"
}

<ThemeProvider theme={darkTheme}>

2. App.js의 styled-components에서 ThemeProvider의 props를 적용.
   ThemeProvider의 theme props의 property 이름으로 App의 컴포넌츠들 property 설정 (ex. textColor, backgroundColor)

const Title = styled.h1`
  color: ${(props) => props.theme.textColor}
`;
  
const Wrapper = styled.div`
  display : flex;
  background-color:  ${(props)=> props.theme.backgroundColor};
`;
  
function App() {
  return (
    <Wrapper>
      <Title>Hello</Title>
    </Wrapper>
  );
}

3. index.js의 ThemeProvider의 props를 변경하여 property를 바꿀 수 있다. 끝