styled component에 mixin 사용하기

Junghyun Park·2021년 5월 6일
3

배경(문제상황)

  • Sass에서 가장 유용한 기능 중에 하나는 @mixin@import을 통해 변수화된 스타일링 속성을 재사용임
  • styled-component 공식 문서에는 의외로 이에 대한 구체적인 설명이 없었음

해결 방법

  • 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')};
 `
profile
21c Carpenter

0개의 댓글