/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 vote281 views1 answer
React html symbol code
Javascript React
0 vote238 views2 answers
React Calender
Javascript React
0 vote248 views1 answer
Dark mode with react hooks
Javascript React
27 votes240 views6 answers
React usestate
Javascript React
0 vote252 views1 answer
React router not working with aws amplify
Javascript React
1 vote243 views1 answer
How to authenticate token in react using axios
Javascript React
2 votes240 views2 answers
Vscode react extensions
Javascript React
0 vote272 views1 answer
Date in react js
Javascript React
1 vote270 views2 answers
Generate apk debug react native
Javascript React
0 vote249 views1 answer
React native init specific version
Javascript React