- theme.js 생성
const theme = { color: { primary: '#03a9f4', // 주 색상 secondary: '#795548', // 부 색상 white: '#FFFFFF', gray: '#CCCCCC', default: '#999999', // 기본 문자 색상 error: '#FF0000', // 오류 색상 } }
- App.js
styled-component
의ThemeProvider
와 위에서 만든theme
을 가져온 후, 컴포넌트 최상단에 감싸 준다.import { ThemeProvider } from 'styled-components' import theme from './theme' <ThemeProvider theme={theme}> <App /> </ThemeProvider>
- 이제 styled component에서 props 로 접근 할 수 있다.
const StyledItem = styled.div` margin-right: ${({ spacingBetween }) => spacingBetween * 4}px; color: ${props => props.theme.color.primary}; `
'React' 카테고리의 다른 글
[React] Currying 과 HOC 에 대해서 (0) | 2020.04.01 |
---|---|
[React] Rest operation VS Spread operation (0) | 2019.09.11 |