Which method is more efficient and why?
I have heard that the css method in Styled-components can be resource-intensive. I am curious to know if using multiple nested ${(prop) => {}} functions is more costly compared to a single function with the css method embedded inside.
Option 1
const Foo = styled.div`
border-radius: 50%;
display: flex;
width: ${(props) => props.size};
height: ${(props) => props.size};
color: ${(props) => props.bgColor};
background-color: ${(props) => props.bgColor};
`;
vs
Option 2
const Bar = styled.div`
border-radius: 50%;
display: flex;
${(props) => {
return css`
width: ${props.size};
height: ${props.size};
color: ${props.bgColor};
background-color: ${props.bgColor};
`;
}}
`;