Asked By: Anonymous
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.
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
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 🙂
Answered By: Anonymous
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
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.