/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 vote380 views3 answers
Line 32:18: 'Link' is not defined react/jsx-no-undef
Javascript React
3 votes366 views2 answers
Get param is react
Javascript React
0 vote347 views1 answer
How to change style class by using onclick function with multiple buttons in react js
Javascript React
114 votes417 views3 answers
React init
Javascript React
0 vote365 views1 answer
Exit ios inspector in react native
Javascript React
0 vote363 views1 answer
Textalignvertical not working in ios react native
Javascript React
0 vote411 views1 answer
React-scripts test single file
Javascript React
-1 vote373 views5 answers
Play audio in react
Javascript React
69 votes396 views6 answers
React route
Javascript React
0 vote371 views3 answers
Flatlist react native keyextractor
Javascript React