@emotion/server css prefix key mismatch

[nikandlv]

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",