- themeProvider로 전역 변수로 사용되는
theme
내부에 자주 사용되는 mixin 속성을 변수화 하여 정의해 둠
- 기존 theme 속성에 접근하듯 사용하고자 하는 곳에서 자유롭게 바로 사용가능
// themes.js
const theme = {
lightPink: '#FCD1DB',
darkPink: '#FF73C8',
borderGray: '#ECECED',
buttonBlue: '#65B5F5',
flexMixin: (direction = 'row', align = 'center', justify = 'center') => `
display:flex;
flex-direction:${direction};
align-items:${align};
justify-content:${justify}
`,
};
export default theme;
// 원하는컴포넌트.js
export const SignUpWrapper = styled.div`
${({ theme }) => theme.flexMixin('column')};
`