Menu
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?
693
To achieve that you can simply pass the styled-component you wish to extend (or inherit styles from) to the styled() constructor, for example, like so: import styled from 'styled-components'; const Square = styled.
Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components.
As of styled-components v4 the withComponent API is now a candidate for deprecation. In all likelihood, you probably want to use the new "as" prop to simply switch what element/component being rendered since the withComponent API is destructive toward styles if the lowest-wrapped component is a StyledComponent.
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
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
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
