/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

22 votes216 views4 answers
Npm react copy to clipboard
Javascript React
1 vote225 views1 answer
React why onclick property function trigger without click
Javascript React
1 vote243 views1 answer
Running scripts is disabled on this system react js
Javascript React
0 vote229 views1 answer
Lite youtube embed react
Javascript React
7 votes216 views3 answers
How to update a state with an array react
Javascript React
0 vote236 views1 answer
Detect if user is online react
Javascript React
48 votes201 views1 answer
Emmet not working in react nextjs
Javascript React
2 votes219 views2 answers
Vscode extensions for better react js
Javascript React
4 votes298 views1 answer
Error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class.
Javascript React
2 votes227 views3 answers
React scroll on top while transition
Javascript React