Use unsafe-inline with styles (mui/material-ui#19938)

src/components/ThemeRegistry/EmotionCache.jsx

@@ -7,7 +7,7 @@ import { CacheProvider as DefaultCacheProvider } from "@emotion/react";
 
 // This implementation is taken from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
 export default function NextAppDirEmotionCacheProvider(props) {
-  const { options, CacheProvider = DefaultCacheProvider, nonce, children } = props;
+  const { options, CacheProvider = DefaultCacheProvider, children } = props;
 
   const [{ cache, flush }] = React.useState(() => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -44,7 +44,7 @@ export default function NextAppDirEmotionCacheProvider(props) {
     return (
       <style
         key={cache.key}
-        nonce={nonce}
+        nonce={options.nonce}
         data-emotion={`${cache.key} ${names.join(" ")}`}
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
@@ -54,5 +54,9 @@ export default function NextAppDirEmotionCacheProvider(props) {
     );
   });
 
-  return <CacheProvider value={cache}>{children}</CacheProvider>;
+  return (
+    <CacheProvider value={cache} prepend={true} nonce={options.nonce}>
+      {children}
+    </CacheProvider>
+  );
 }

src/middleware.js

@@ -14,7 +14,7 @@ export function middleware(req) {
     script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https: http: 'unsafe-inline' ${
       process.env.NODE_ENV === "production" ? "" : `'unsafe-eval'`
     };
-    style-src 'self' 'nonce-${nonce}';
+    style-src 'self' 'unsafe-inline';
     img-src 'self' blob: data:;
     font-src 'self' data:;
     object-src 'none';