-
-
Notifications
You must be signed in to change notification settings - Fork 38
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Injection order of tss and regular styles are in the wrong order for a short while #52
Comments
Hi,
This is a no-op.
This is not a correct setup for SSR. A new instance of emotion cache must be created for every render on the server. Beside, do you use Please create a sandbox if you want me to provide further assistance. With stackblitz you can even create SSR playgrounds. |
@garronej I've totally misread the example and didn't create a new emotion cache for each server render.. I've now corrected it and it seems to work as expected!
I'm still using I've read the source code of cx and it seems it overrides any media queries here? So that it more works like inline styles? Or does it do some additional things? |
Yes it absolutely do additional things! It ensures styles are overwritten in the correct order! const useStyles = makeStyles()({
"blue": {
"backgroundColor": "blue"
},
"red": {
"backgroundColor": "red"
}
});
function MyComponent(){
const { classes, cx } = useStyles();
return (
<div className={cx(classes.red, classes.blue)}>Hello World</div>
);
} In this example the For what it does relative to media queries see this issue. Best |
Hi there!
I'm running into an issue where the order of css and tss styles are sorted in the wrong way in the head for a short period of time..
Video of the problem: https://d.pr/v/SXxXJq
You can see it happening from the 15 second mark in the video, you see the
tss-
below thecss-
styles for a short whileIt seems to be due to a reordering in the header which is happening teporarily:
Screen.Capture.on.2022-01-07.at.10-47-49.mp4
Server loaded styles:
CSS styles get applied below the tss styles:
CSS styles are now moved to the top:
I'm using the following code:
I've tried without the TssCacheProvider first, but that doesn't seem to be making a difference.
Ideas: After googling a bit we might be able to use this option to make this more stable?
emotion-js/emotion#2037 (comment)
(In general it bothers me a bit that it even recreates styles in the DOM, because that means that the browser must reevaluate the styles, but maybe that goes away if the locations are exactly the same..)
(I promise I'm almost done bothering you with all these issues 😗)
The text was updated successfully, but these errors were encountered: