[React] Styled Component로 Global Theme 다루기

1. theme.js 생성

   const theme = {
      color: {
       primary: '#03a9f4', // 주 색상
       secondary: '#795548', // 부 색상
       white: '#FFFFFF',
       gray: '#CCCCCC',
       default: '#999999', // 기본 문자 색상
       error: '#FF0000', // 오류 색상
     }
   }

2. App.js styled-component 의 ThemeProvider 와 위에서 만든 theme 을 가져온 후, 컴포넌트 최상단에 감싸 준다.

   import { ThemeProvider } from 'styled-components'
   import theme from './theme'
   
   <ThemeProvider theme={theme}>
   	<App />
   </ThemeProvider>

3. 이제 styled component에서 props 로 접근 할 수 있다.

    

   const StyledItem = styled.div`
     margin-right: ${({ spacingBetween }) => spacingBetween * 4}px;
     color: ${props => props.theme.color.primary};
   `