/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 vote146 views1 answer
React export multiple component from index.js
Javascript React
0 vote173 views1 answer
React handling event
Javascript React
3 votes153 views1 answer
Could not resolve dependency: npm ERR! peer react@"^16.0.0" from [email protected]
Javascript React
2 votes138 views4 answers
Discord js remove reaction from user
Javascript React
0 vote128 views1 answer
React open a link to an outside siite
Javascript React
2 votes86 views1 answer
Range slider mui can't slide
Javascript React
1 vote154 views2 answers
React Context API
Javascript React
0 vote150 views1 answer
How to set the id attr to a var in reactjs
Javascript React
0 vote136 views1 answer
React native regenerate android and ios folders
Javascript React
0 vote142 views3 answers
Line 32:18: 'Link' is not defined react/jsx-no-undef
Javascript React