3-5. Styled-components에 Props 활용하기

Styled-components에 Props 활용하기

 

styled-components를 이용해 css를 지정하고자 할때 props를 활용해야 할 때가 있다!

 

styled-componets로 작성된 컴포넌트들로 구성된 아래와 같은 컴포넌트가 있다

export default() => (
    <Header>
        <List>
            <Item>
                Item1
            </Item>
            <Item>
                Item2
            </Item>
            <Item>
                Item3
            </Item>
            <Item>
                Item4
            </Item>
        </List>
    </Header>
);

 

만약 Item 들에 각각 다른 background-color를 적용하고 싶다면? 어떻게 해야할까!!?

적용하고 싶은 background-color 를 Item에 props로 전달, styled-components로 선언한 Item에서 이 props를 받아주면 된다!

 

const Item = styled.li`
   (...생략)
   border-color: ${props => props.even ? '#3498db' : '#333333'}
   ${props => props.even && `
   color: white;
   background-color: grey;
   `}
`;

export default() => (
    <Header>
        <List>
            <Item even={false}>
                Item1
            </Item>
            <Item even={true}>
                Item2
            </Item>
            <Item even={false}>
                Item3
            </Item>
            <Item even={true}>
                Item4
            </Item>
        </List>
    </Header>
);

 

특정 상태에 따라 css를 지정하는 것도 가능하다!

const Item = styled.li`
   (...생략)
   border-color: ${props => props.even ? '#3498db' : '#333333'}
   ${props => props.even && `
     color: white;
     background-color: grey;
   `}	
`;

export default() => (
    <Header>
        <List>
            <Item even={false}>
                Item1
            </Item>
            <Item even={true}>
                Item2
            </Item>
            <Item even={false}>
                Item3
            </Item>
            <Item even={true}>
                Item4
            </Item>
        </List>
    </Header>
);