v5 + emotion - increase in Cumulative Layout Shift

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

Current Behavior 😯

I notice significant increase in CLS after upgrading project from v4 to v5 and refactoring makeStyles/useStyles to emotion.

Increase is from acceptable 0.059 on mobile and 0.006 desktop to 0.574 mobile and 0.869 desktop.

Project is next.js, the only change made is makeStyles => emotion refactoring.

It was done using css prop

example

const style = { link: css' color: inherit; ' } <NextLink href={href}><a href={href} css={style.link} {...rest}>{children}</a></NextLink>

Opted to use css prop as it is the most similar to previous format using makeStyles

Did anyone else noticed this metric to increase?

There is another similar issue at emotion’s git Emotion causes large Layout Shift (with critical CSS extraction) #2154 , but not completely the same, i don’t have any local font for example, i have google fonts which add only 0.0something to cls

I didn’t do any specific configuration or setup, it is and should work out of the box with nextjs and mui

Your Environment 🌎

Next.js, mui v5, emotion

[haleybe]

i agree, was wondering to see if there are more cases.

i will try to setup some example

[yulev5]

I see the same problem in my website