I am having an issue where my makestyles loads after the initial page render of my nextjs application.
I am using the latest App Router with NextJS as well as the latest stable version of MUI (5.14)
I've copied the example from the MUI documentation so all the MUI component render correctly, but i am attempting to use jss-as-styling solution with the makeStyles function of MUI.
The following is the core pieces of code:
app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeRegistry options={{ key: 'mui' }}>
{children}
</ThemeRegistry>
</body>
</html>
);
}
app/ThemeRegistry.js
export default function ThemeRegistry(props) {
const { options, children } = props;
const [{ cache, flush }] = React.useState(() => {
const cache = createCache(options);
cache.compat = true;
const prevInsert = cache.insert;
let inserted = [];
cache.insert = (...args) => {
const serialized = args[1];
if (cache.inserted[serialized.name] === undefined) {
inserted.push(serialized.name);
}
return prevInsert(...args);
};
const flush = () => {
const prevInserted = inserted;
inserted = [];
return prevInserted;
};
return { cache, flush };
});
useServerInsertedHTML(() => {
const names = flush();
if (names.length === 0) {
return null;
}
let styles = '';
for (const name of names) {
styles += cache.inserted[name];
}
return (
<style
key={cache.key}
data-emotion={`${cache.key} ${names.join(' ')}`}
dangerouslySetInnerHTML={{
__html: styles,
}}
/>
);
});
return (
<CacheProvider value={cache}>
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
</CacheProvider>
);
}
app/page.js
export default function Home() {
return <HomePage />;
}
app/home-page.js
'use client';
import useStyles from './styles';
export default function HomePage() {
const classes = useStyles();
return (
<Box className={classes.root}>
....components etc....
</Box>
)
}
app/styles.js (makeStyles is exported from here)
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
root: {},
...otherStyles etc...
}));
export default useStyles;
Below is what it looks like before makeStyles is ran on the clientside
And then after about 1/2 second when it loads in makeStyles the css is correctly displayed
