Use CSS/Jquery calc function in React Js

Question

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 1

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> ) 

In case you need to overwrite multiple widths (fallbacks) for browser compatibility

divStyle = {width: 'calc(100% - 276px)',     fallbacks: [         { width: '-moz-calc(100% - 276px)' },         { width: '-webkit-calc(100% - 276px)' },         { width: '-o-calc(100% - 276px)' } ]}