[Styled Component - 6] ThemeProvider

ThemeProvider는 styled-components 패키지에서 제공하는 컴포넌트 중 하나로, 

테마(theme)를 애플리케이션 전역에서 사용할 수 있도록 해줍니다. 

ThemeProvider를 사용하면 컴포넌트 계층 구조 어디에서나 일관된 테마를 사용할 수 있습니다.

 

ThemeProvider를 사용하려면 다음과 같이 styled-components와 함께 ThemeProvider 컴포넌트를 임포트하고 

사용할 컴포넌트 계층 구조 내에 포함시키면 됩니다.

import React from 'react';
import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: '#fca311',
    secondary: '#ffba08',
  },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 테마를 사용할 컴포넌트 계층 구조 */}
    </ThemeProvider>
  );
}

export default App;

위의 예제에서는 ThemeProvider 컴포넌트를 사용하여 theme 객체를 전달하고 있습니다. 

theme 객체는 커스텀 테마를 정의하는데 사용됩니다. 

theme 객체 안에는 원하는 테마 관련 속성들을 정의할 수 있습니다. 

위의 예제에서는 colors라는 키를 가진 테마 속성을 정의했습니다.

---

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.theme.colors.primary};
  color: #ffffff;
  padding: 8px 16px;
`;

function Button() {
  return <StyledButton>Button</StyledButton>;
}

ThemeProvider 컴포넌트로 감싸진 하위 컴포넌트들은 theme 객체를 통해 테마에 접근할 수 있습니다. 

styled-components에서는 theme 속성을 사용하여 테마 속성에 접근하거나 테마 속성을 동적으로 변경할 수 있습니다.