我听说cssStyled-component 的方法非常昂贵，但我想知道多个嵌套${(prop) => {}}是否比css使用内部方法的单个 fn 更昂贵。
方法一
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};
`;
对比
方法二
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};
`;
}}
`;
性能差异应该可以忽略不计。样式化组件唯一的优化是如果您的样式是静态的（没有插值）。
请注意，styled.div或任何其他样式化 CSS 方法已经执行与css. 这些方法接受函数作为参数（而不是内插字符串）。因此，您可以更进一步并执行以下操作：
const Baz = styled.div((props) => css`
border-radius: 50%;
display: flex;
width: ${props.size};
height: ${props.size};
color: ${props.bgColor};
background-color: ${props.bgColor};
`);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句