Use Calc() Function in Makestyles

Use calc() function in makeStyles

Your styles has lower priority than the one from MUI, try adding a couple of ampersands to increase the CSS specificity.

address: {
  width: "calc(24vw + 8px)",
  "&&": {
    width: "calc(24vw + 8px)" // same as the above but with higher priority
  }
}

References

• https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
• https://cssinjs.org/jss-plugin-nested?v=v10.8.1#use--to-reference-selector-of-the-parent-rule

Use calc() function in makeStyles

Your styles has lower priority than the one from MUI, try adding a couple of ampersands to increase the CSS specificity.

address: {
  width: "calc(24vw + 8px)",
  "&&": {
    width: "calc(24vw + 8px)" // same as the above but with higher priority
  }
}

References

• https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
• https://cssinjs.org/jss-plugin-nested?v=v10.8.1#use--to-reference-selector-of-the-parent-rule

Invalid property value error for calc() function

The values inside calc() must be seperated by a space.

height: "calc(100vh - 4rem)"

Use CSS/Jquery calc function in React Js

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)' }
]}

Why use useStyles MaterialUI function instead of CSS?

One of the benefits of using CSS in JS or something similar, just like the way your are writing CSS with Material UI is that you could make the CSS property dynamic. Meaning that the CSS property could adapt to any dynamic data on your App.

Imagine you are creating a fade-in effect for some cards to pop up, and you want it happens in the following way:

• It will always be 1 seconds for all the cards to show up, from the beginning till the end.
• There will be a equal time for each card to fade-in.
• After the former card finished its fade-in animation, the next card will start the fade-in animation (that means the latter card should have the animation delay of the card's animation duration).

If you have two cards in total, maybe you could simple write the CSS aniamtion-duration of 0.5s, and 0.5 animation-delay for the second card.

But what if you don't know the total number of cards? That's what we called a dynamic data. We could not make a static CSS property to complete such animation. With CSS alone and no help from HTML & JS, there's no way of doing that. With JS, we have the ability to access the variable and dynamic data, that could also be applied into CSS, so we could put them into the CSS.

CSS in JS is not the only way but an efficient tool to achieve that, that's why there are many packages out there to use it, for example Styled Component & Emotion. Not to mention, CSS in JS also have many other benefits, such as could make your CSS reusable (It will be treaten like an object before turning to actual CSS), hope this can help you.

---

Related Topics