[Emotion] Theming

nej1044·2022년 5월 13일
0

Emotion

목록 보기
2/2

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}
`
profile
알고리즘을 좋아하는 근데 js, next.js, react-native를 곁들인 프론트엔드 응애

0개의 댓글