[Emotion] Theming

theme는 @emotion/react패키지에 포함되어 있습니다.

ThemeProvider 앱의 최상위 수준에 추가하고 props.theme로 테마에 접근할 수 있는 기능을 제공합니다.

// _app.tsx
import {ThemeProvider} from '@emotion/react'

declare module '@emotion/react' {
	export interface DefaultTheme {
     colors: {
     	primary: string;
     }
    }
}

const theme:DefaultTheme = {
	colors: {
      primary: 'hotpink'
    }
}

return(
	<ThemeProvider theme={theme}>
  		<Component {...pageProps} />
  	</ThemeProvider>
)

// styled에서 props.theme로 사용
const Wrapper = styled.div`
	color: ${(props)=> props.theme.colors.primary}
`