Closed jmdsg closed 3 years ago
cc @kof
Any news on this?
Same here is called too many times unnecessary
Encountered this problem as well.
I noticed that this problem only occurs when using a nested selector. So adding a separate class to the element the nested selector points at and adding the dynamic styling to that class should solve the problem.
In this code sandbox I debugged the problem: https://codesandbox.io/s/styling-duplicates-on-state-change-0weti
Note: In my browser (FireFox) I had to close and open the inspector to see the affect, thus make sure you follow the debug instructions in the demo.
This doesn't work:
myParentElement: (props) => ({
'& .myNestedElement': {
// use props
}
})
This does work:
myNestedElement: (props) => ({
// use props
})
Is there any update on this issue? Still getting more than one class when using props for adaptive styling.
Also interested in item 6 – makeStyles
shouldn't re-calculate and re-attach styles unless the props change.
I'd imagine it can be fixed with a small change like https://github.com/schnerd/material-ui/commit/21f98bd61c6ab10bc54bf8195e70cefcc96502bb.
These issues should have been solved in v5 thanks to #22342 and the new @material-ui/styled-engine
package. You can play with it at: https://codesandbox.io/s/bold-goodall-2iltv?file=/src/App.tsx. By default, it wraps emotion.
So, what's the work around on v4?
@oliviertassinari A workaround for v4 would be really awesome. We have huge application, which is using material-ui. That means, when v5 gets released, we have to prepare 400 files before we can really update...
@ffjanhoeck I would recommend trying react-jss out. The migration should be easy and they have a better handling of this problem. Also note that you don't need to migrate all the makeStyles and withStyles in v5, the module is still here.
@oliviertassinari Is the makeStyles
in material-ui v4 not a react-jss wrapper?
Or do you mean by trying out react-jss, that I should directly use react-jss, without the makeStyles from material-ui ?
@ffjanhoeck Material-UI v4 uses jss, not react-jss. My suggestion is to use react-jss
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:
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.withStyles
/makeStyles
API).This was made possible by the awesome work of @mnajdova.
Hi @oliviertassinari
How do we change the usage of jss
in favor of react-jss
in v4 to solve this issue temporarily until we can upgrade to v5?
I couldn't find anything about it in the docs.
Thanks.
@maticrivo this worked for me.
add to createStyles in makeStyles
disabled: { // Define any styles for the disabled state if needed },
I have found some issues using
makeStyles
with dynamic styles (arrow functions) and i'm going to list them here since i think those may be related, and i feel that is unnecessary to create one issue per each of these points.This issues are shown in this codesandbox MCVE https://codesandbox.io/s/lrwvw5lx6q.
$
) a static class (not using arrow function) from a dynamic class (using arrow).makeStyles
and i see that it does not depend on props, everytimeuseStyles
is called and no matter if the props are the exacly the same the stylesheet is updated. Any reason for this?Because when you call
useStyles(props)
with the same props or even using something like this:Doesn't seem necessary to update the stylesheets.
Expected Behavior
makeStyles-animate-10
Current Behavior
makeStyles-animate-4 makeStyles-animate-10
index.js:26 Warning: [JSS] Could not find the referenced rule simple in makeStyles.
index.js:26 Warning: [JSS] Referenced keyframes rule "rotate1" is not defined.
Steps to Reproduce
simple
fromsimple: {}
tosimple: () => ({})
the titleHello CodeSandbox
will have the expected green color.h2
containingYou clicked X times!
or checking the rules in the sandboxdocument.styleSheets
there will be multiple rule definitions repeated.rotate2
that is inside an arrow function is generated with empty body. The animation is not being applied.rotate1
is generated correctly but it is not referenced. The animation is not being applied.Your Environment
Not sure if all this points are really issues or some of them are not allowed and its behavior is undefined.