add a custom sheet

mui · Sep 6, 2024 · f333985 · f333985
1 parent bcff288
commit f333985
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/cache": "^11.13.1",
+    "@emotion/sheet": "^1.4.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1"
   },

diff --git a/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js b/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js
@@ -3,12 +3,39 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
+import { StyleSheet } from '@emotion/sheet';
+
+const createEmotionCache = (options) => {
+  const cache = createCache(options);
+
+  /**
+   * This is for client-side apps only.
+   * A custom sheet is required to make the GlobalStyles API work with `prepend` and `insertionPoint`.
+   * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
+   */
+  class MyStyleSheet extends StyleSheet {
+    constructor(args) {
+      super(args);
+      this.prepend = cache.sheet.prepend;
+      this.insertionPoint = cache.sheet.insertionPoint;
+    }
+  }
+
+  cache.sheet = new MyStyleSheet({
+    key: cache.key,
+    nonce: cache.sheet.nonce,
+    container: cache.sheet.container,
+    speedy: cache.sheet.isSpeedy,
+  });
+
+  return cache;
+};
 
 // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 let cache;
 if (typeof document === 'object') {
-  cache = createCache({ key: 'css', prepend: true });
+  cache = createEmotionCache({ key: 'css', prepend: true });
 }
 
 export default function StyledEngineProvider(props) {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml