CODEWITHSUNDEEP
material-uinext.jsjss
KorHosik
KorHosik

Reputation: 1277

Styles injection order with JSS and Material-UI differs between dev and prod

I'm trying to use Material-UI (https://material-ui.com/) with NextJS (https://nextjs.org/), styling with the JSS solution.

It works well in my local environment, but my design is broken on prod. After a quick analysis, it seems to be an issue with the injection order of the <style> tag: my styles are indeed injecting between MUI ones, canceling my changes.

DEV ENVIRONMENT
In dev

PROD ENVIRONMENT
In prod

As you can see from the screenshots above, the injection order is different in prod. The Alert style is therefore overwritten by the MuiButton making my page broken. (I also don't get why the styles for Alert and DashboardLayout have an empty clone, but that's not my main issue here...)

It may be worth to note that the styles generated on the server-side are OK: the page is rendered correctly on loading. The issue occurs only after the client-side has run.

My code is based on this example from Material-UI (usage with NextJS).

I really don't get why it's OK on dev and not on prod (and I don't manage with NextJS to run the prod build on local for an easier debugging ^^').

Do you have an idea on how to understand and investigate this issue?

Thanks in advance :)

Upvotes: 5

Views: 1729

Answers (1)

KorHosik
KorHosik

Reputation: 1277

So, I've asked the question also on the Material-UI repo, and the maintainer provides me some useful information.

The main point I've missed it that <styles> are injected when makeStyles is called: injection order is the same than calls to makeStyles order.

The file defining my Alert component was including before Button component, that's why its style was injecting before the one for Button. It breaks my design, but it's logical and this behavior is intended.

The fact that it works on dev environment is a mystery on my side... But it's a buggy behavior, so we have to be cautious!

In order to solve my issue, I've just need to be sure that the calls order of makeStyles was the intented one.

Upvotes: 4

Related Questions