Styled Components条件calc计算问题：如何正确获取$marginTop值？

当前通过组件传递值：

<Img $marginTop={entry?.intersectionRatio} src={imgUrl} alt="" />

期望实现逻辑：当$marginTop不为空时，设置margin-top为calc($marginTop*-10)vh；否则设为0px。但下方Styled Components代码无法正确获取$marginTop值：

const Img = styled.img<{$marginTop : number | undefined}>`
    margin-top: ${({ $marginTop }) => ($marginTop ?  "calc($marginTop*-10)vh" : "0px")};
`

问题出在样式字符串里的$marginTop只是被当作普通文本，没有被JavaScript解析。需要用模板字符串插值把变量值注入到CSS规则中：

const Img = styled.img<{$marginTop : number | undefined}>`
    margin-top: ${({ $marginTop }) => 
        $marginTop ? `calc(${ $marginTop } * -10)vh` : "0px"
    };
`

补充说明 #

• 将原来的双引号字符串改为反引号模板字符串，这样才能通过${}插入变量值
• 在CSS的calc运算中给*前后加上空格，避免解析错误
• 如果需要在$marginTop为0时也应用calc规则（因为0属于falsy值，原判断会走0px分支），可以把判断条件改为$marginTop !== undefined：

const Img = styled.img<{$marginTop : number | undefined}>`
    margin-top: ${({ $marginTop }) => 
        $marginTop !== undefined ? `calc(${ $marginTop } * -10)vh` : "0px"
    };
`

内容的提问来源于stack exchange，提问作者constantlyFlagged