iamsaksham iamsaksham - 4 months ago 62
CSS Question

Use CSS/Jquery calc function in React Js

I have a situation where I need to give dynamic width to the

div
so I need to use this
divStyle = {width: calc(100% - 276px)}
in my React Js code. But doing so it gives an error that
calc is not a function
.

I know this can be achieved using Jquery but I dont want to introduce JQuery to my application. If there is any kind of workaround or hack that might solve this then please share.

code:

customFormat = 'hello-div'
divStyle = {width: calc(100% - 276px)}
return (
<div className={customFormat} style={divStyle}>
Hello World
</div>
)

Answer

If you need some more specific CSS you need to put it into quotes - react inline styles doc

<div style={{width: 'calc(100% - 276px)'}}></div>

In your exact case

customFormat = 'hello-div'
divStyle = {width: 'calc(100% - 276px)'}
return (
    <div className={customFormat} style={divStyle}>
      Hello World
    </div>
)