styled component 에서 mixin 사용법

mixin은 여러번 자주 사용하는 style을 재활용하여 사용하는 것이다

📌 styles component 안에 mixin.js 폴더를 만들어 준다.

📌 mixin.js 폴더 안에 자주 사용해주는 display : flex 함수를 만들어 준다

flex: (direction = 'row', justify = 'center', align = 'center') 

'' 안에 있는 값은 일단 기본값을 설정 해 줄수 있는 값으로 적용해준다

📌 index.js 폴더로 이동하여 mixin.js폴더를 import 해주고, 전체에서 사용 할 수 있도록 theme={{style : theme}} 옆에 mixin을 추가로 선언해준다.

${props => props.theme.mixin.flex('','','')}

📌 사용하고 싶은 styled component 로 가서 위에 코드처럼 사용해주면 된다.

• ex)

const HeaderTitle = styled.div`
display : flex;
flex-direction: column;
justify-content: center;
align-items: center;
`

${props => props.theme.mixin.flex('column', 'center', 'center')};

• ex) 적용안하게 하고 싶은 값은 null을 보내주면 된다.

const HeaderTitle = styled.div`
display : flex;
justify-content: center;
`

${props => props.theme.mixin.flex(null, 'center', null)};

📌 구조분해할당도 가능합니다

${props => props.theme.mixin.flex('column', 'center', 'center')};

//구조분해할당 전

${({theme}) => theme.mixin.flex('column', 'center', 'center')};

//구조분해할당 후

css를 배우고 익숙해 지려하니 scss를 배우고 알 거 같으니 styled.component를 배우게 됐다.

잊지 않기 위해 적어 놓습니다👩‍💻