在styled-components中使用calc()不生效，我的写法是否有误？

嘿，这个问题我之前也踩过坑！你的代码里calc()不生效的核心问题是CSS语法要求calc()里的运算符两边必须保留空格——你写的calc(100vh-16px)里的减号和前后值之间没有空格，浏览器会把100vh-16px当成一个无效的单一长度值，自然不会应用这个样式。

修复后的代码 #

const styledDiv = styled.div`
  ${props => props.takeViewportHeight && `min-height: calc(100vh - 16px);`}
`

补充说明 #

• 为什么空格这么重要？CSS的calc()依赖空格来区分运算符号和值，没有空格的话，浏览器无法解析出正确的计算逻辑，只会把整个字符串当作无效的CSS值直接忽略。
• 你这里的动态props判断逻辑本身是没问题的，只要保证calc()内部的语法符合CSS规范，样式就能正常生效。如果之后需要用props传入动态数值，记得同样给运算符留空格，比如：calc(100vh - ${props => props.offset}px)。

内容的提问来源于stack exchange，提问作者R. Kohlisch