React) styled-component에 props 값 (변수) 사용하기

example

import styled from "styled-components";

const StyledDiv = styled.div`
   width: ${props => `${props.xs * 24}px`} ;
   padding: ${props => props.padding || 0};
   ...
`;


export default function Example({ children, xs, padding }) {
    return (
        <StyledContainer xs={xs} padding={padding}>
          {children}
        </StyledContainer>
    );
}

 

props 값을 styledDiv로 전달해서 사용하고 적용된 값이 없다면 || 두번째 값이 디폴트로 적용되는 것