Open
Description
Current behavior:
The key property is ignored and css prefix is used instead of the provided cache key
Code
import createCache from "@emotion/cache";
import { Direction } from "@mui/material";
import { prefixer } from "stylis";
export default function createEmotionCache(customKey: string) {
return createCache({
key: `anything-${customKey}`,
stylisPlugins: [prefixer],
});
}
const { renderStylesToString } = createEmotionServer(cache);
const initialProps = await Document.getInitialProps(ctx);
console.log(renderStylesToString(initialProps.html));Output example
.css-17ajgef-MuiButtonBase-root-MuiButton-root::-moz-focus-inner{
border-style:none;
}
.css-17ajgef-MuiButtonBase-root-MuiButton-root.Mui-disabled{
pointer-events:none;
cursor:default;
}To reproduce:
Render the styles with nextjs server side
Expected behavior:
Use the provided cache key instead
This does work properly on the client side but not on the server
Environment information:
"@emotion/cache": "^11.13.5",
"@emotion/react": "^11.13.5",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.13.5",
"@mui/material": "^6.1.8",
"@mui/material-nextjs": "^6.1.8",
"@types/stylis": "^4.2.6",
"i18next": "^23.16.8",
"jotai": "^2.10.3",
"next": "15.0.3",
"next-i18next": "^15.3.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-i18next": "^15.1.1",
"stylis": "^4.3.4",