/Javascript/React/React jsx style with calc

React jsx style with calc

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)' }
]}

Source: stackoverflow.com

Similar codes

0 vote367 views1 answer
React form hook trigger is not a function
Javascript React
0 vote377 views1 answer
Package path ./react is not exported from package next-auth
Javascript React
0 vote395 views1 answer
Web-vitals react
Javascript React
-1 vote848 views1 answer
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
Javascript React
0 vote374 views1 answer
V4 history for react action or api calls
Javascript React
0 vote1.3K views1 answer
Hide react from netlify
Javascript React
0 vote430 views1 answer
Setstate to false after 10 sec react native
Javascript React
0 vote397 views1 answer
React js and graphql integration
Javascript React
0 vote434 views1 answer
Create react app cloudfront invalidation
Javascript React
0 vote364 views1 answer
Library to add navigation in react native
Javascript React