I'm using material-ui for my next.js program and trying to update it from v4 to v5. I switch the sytle engine to styled-component for I've already been using it in my project before. After updating, I found some components such as MenuItem got broken style. (style tags in html head) I looked into the chrome console and it seems like the style tag is not in correct order. (styles override in wrong order) As you can see in the screenshot, some Mui jss style tags are inserted after the styled-component style tag, which makes styles overriding each other in wrong order. I have no idea about where those jss style tags comes from and how to change the order. I found something in the doc of material-ui about css injection order but seems like it doesn't relate to this kind of situation. Any one help?