[styles] makeStyles + @media + Adapting based on props: not updating correctly

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When a property is changed, styles that are inside a @media selector are not being re-generated.

Expected Behavior 🤔

When a property is changed, all styles that are properties-dependent should be re-generated and re-applied to the component.

Steps to Reproduce 🕹

See example here: https://codesandbox.io/s/makestyles-mediaqueries-mygqi?file=/demo.js

Steps:

1. “Swap color” button loads with background red and border/text-shadow blue
2. Click on the “Swap color” button
3. Background is changed to “blue” ✅
4. Text-shadow is changed to “red” ✅
5. Border is kept “blue” ❌

Context 🔦

I want to modify dynamically the fontSize of the input components (input, label, helper text) based on props. I’m receiving a custom property called size that could be either Large or Small, and changing sizes of the components based on that property. The fontSize is expected to be responsive too, so for example

size: Large =>
fontSizes
  Sm: 14px
  M:  16px
  L:  20px
  Xl: 24px

size: Small =>
fontSizes
  Sm: 12px
  M:  14px
  L:  14px
  Xl: 16px

I need to access the props at the rule level because I’m generating the @media selectors in another utility that I can’t modify

Your Environment 🌎

Tech	Version
Material-UI	v4.9.9
React	16.13.1
Browser	all
TypeScript	n/a

[oliviertassinari]

An update, this issue is being resolved in v5 thanks to #22342 and the new @material-ui/styled-engine package. The same codesandbox but updated & working with the latest alpha version: https://codesandbox.io/s/makestyles-mediaqueries-forked-h0iq5?file=/demo.js.

[oliviertassinari]

An update, we have now made enough progress with the new @material-ui/styled-engine package in v5 to move toward a progressive removal of the @material-ui/styles package (based on JSS). The current plan:

• In v5.0.beta.0, this package will come standalone, in complete isolation from the rest.
• In v5.0.0, this package will be soft deprecated, not promoted in the docs, nor very actively supported.
• During v5, work on making the migration easier to the new style API (sx prop + styled() API). We might for instance, invest in the documentation for using react-jss that has more or less the same API. We could also invest in an adapter to restore the previous API but with emotion, not JSS.
• In v6.0.0, this package will be discontinued (withStyles/makeStyles API).

This was made possible by the awesome work of @mnajdova.