Injection order of tss and regular styles are in the wrong order for a short while

[garronej]

Injection order of tss and regular styles are in the wrong order for a short while

[paales]

@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!

Beside, do you use cx or something else to merge classe names?

I'm still using clsx() to merge multiple classes, didn't understand what the advantage was.

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?

[garronej]

Hi,

<TssCacheProvider value={getTssDefaultEmotionCache()}>

This is a no-op.

let cache: EmotionCache | undefined
/** Creates a single instance of the @emotion/cache that is shared between server and client */
export function emotionCache() {
if (!cache) cache = createCache({ key: 'mui', prepend: true })
return cache
}

This is not a correct setup for SSR. A new instance of emotion cache must be created for every render on the server.
Please refer to the documentation.

Beside, do you use cx or something else to merge classe names?

Please create a sandbox if you want me to provide further assistance. With stackblitz you can even create SSR playgrounds.

[garronej]

@paales

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 <div> will have a blue background. But if I use cx(classes.blue, classes.red) the <div> will have a red background.

For what it does relative to media queries see this issue.

Best