/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

4 votes196 views3 answers
Get params in react router dom v6
Javascript React
0 vote226 views1 answer
Random picture position in react
Javascript React
0 vote156 views2 answers
Discord js remove all reactions from user
Javascript React
7 votes251 views3 answers
How to route react from laravel
Javascript React
0 vote209 views1 answer
React native Setting a timer for a long period of time
Javascript React
0 vote217 views1 answer
Cannot read properties of undefined (reading 'length') selectionlist react native
Javascript React
0 vote222 views1 answer
Dropdown search field in react native
Javascript React
24 votes207 views6 answers
Shadow react native
Javascript React
11 votes209 views3 answers
Add condition inside a className in reactjs
Javascript React
18 votes186 views6 answers
React native build
Javascript React