styled-components

props 스타일 그대로

const StyledLi = styled.li`
    ${props => props.fontStyle || ""};
`

const A = () => {
	return(
    	<ul>
      		<StyledLi fontStyle={{"color": "blue"}}>텍스트</StyledLi>
        	<StyledLi fontStyle={{"font-size": "2rem"}}>텍스트</StyledLi>
      	</ul>
    );
}

margin 계산

const MarginLi = styled.li`
    margin-bottom : ${props => `${props.marginBottom * 20}px` || "inherit"};
`

const A = () => {
	return(
    	<ul>
      		<MarginLi marginBottom={2}>텍스트</MarginLi>
      	</ul>
    );
}