react jsx style with calc

Solutions on MaxInterview for react jsx style with calc by the best coders in the world

showing results for - "react jsx style with calc"
Montserrat
07 Oct 2016
1If you need some more specific CSS you need to put it into quotes - react inline styles doc
2
3<div style={{width: 'calc(100% - 276px)'}}></div>
4In your exact case
5
6customFormat = 'hello-div'
7divStyle = {width: 'calc(100% - 276px)'}
8return (
9    <div className={customFormat} style={divStyle}>
10      Hello World
11    </div>
12)
13In case you need to overwrite multiple widths (fallbacks) for browser compatibility
14
15divStyle = {width: 'calc(100% - 276px)',
16    fallbacks: [
17        { width: '-moz-calc(100% - 276px)' },
18        { width: '-webkit-calc(100% - 276px)' },
19        { width: '-o-calc(100% - 276px)' }
20]}