search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.64k stars 32.22k forks source link

Style fallbacks in ^4.4.3 #17580

Closed daniel-rabe closed 5 years ago

daniel-rabe commented 5 years ago

With material-ui 3.5.x I could use fallbacks in styles functions.

https://codesandbox.io/s/naughty-visvesvaraya-788o2?fontsize=14

which worked like expected.

image

After updating to ^4.4.3 the style is broken.

https://codesandbox.io/s/patient-sea-bugdp?fontsize=14

image

daniel-rabe commented 5 years ago

does not work with makeStyles hook too

oliviertassinari commented 5 years ago

@daniel-rabe Can you reproduce the same issue with JSS? Have you considered using styled-components instead?

daniel-rabe commented 5 years ago

With react-jss it works https://codesandbox.io/s/dreamy-fire-ohe4e?fontsize=14

daniel-rabe commented 5 years ago

just JSS works too (with 10.0.0-alpha25 too)

https://codesandbox.io/s/awesome-kepler-ul12w?fontsize=14

oliviertassinari commented 5 years ago

Thanks for checking it out! The feature comes from the jss plugin expand, a plugin we don't include by default for bundle size reason. You can create your own instance of JSS with it: https://github.com/cssinjs/jss/blob/eb013876901c561eedaa468ad23bc31704e15765/docs/jss-plugin-expand.md#fallbacks-support.

In the future, we will move toward #6115.

daniel-rabe commented 5 years ago

i already tried this but it didnt fix the problem

https://codesandbox.io/s/patient-sea-bugdp?fontsize=14

i also noticed that the bug only occurs if i use the Array syntax,

{ borderColor: 'red', fallbacks: {borderColor: 'green'} } works with and without adding jss-plugin-expand

daniel-rabe commented 5 years ago

Sandbox to compare:

https://codesandbox.io/s/practical-mountain-lbhs3?fontsize=14