12

Trying this:

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

It's not working. Am I missing something about calc in styled components?

R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59

1 Answers1

40

A funny tip about CSS calc:

whitespaces are required between +/-

meaning:

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

should work

StackedQ
  • 3,999
  • 1
  • 27
  • 41
  • [First note on MDN's page about calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc#notes) talks about this – Ruan Mendes Jul 25 '22 at 17:19