diff --git a/.changeset/green-dingos-design.md b/.changeset/green-dingos-design.md
new file mode 100644
index 000000000..4483f7a0e
--- /dev/null
+++ b/.changeset/green-dingos-design.md
@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Change `Global` component to use the `StyleSheet` constructor of the current `cache.sheet`. This is useful when `cache.sheet` is not the default implementation. Thanks to that the inner sheet constructed by `Global` can share the behavior with its "main" sheet that is hold by the `cache`.
diff --git a/packages/react/__tests__/custom-cache.js b/packages/react/__tests__/custom-cache.js
index 1fb975c8c..2ccf1e336 100644
--- a/packages/react/__tests__/custom-cache.js
+++ b/packages/react/__tests__/custom-cache.js
@@ -1,9 +1,11 @@
// @flow
/** @jsx jsx */
-import 'test-utils/next-env'
import createCache from '@emotion/cache'
-import { jsx, CacheProvider } from '@emotion/react'
+import { CacheProvider, Global, jsx } from '@emotion/react'
+import { StyleSheet } from '@emotion/sheet'
import renderer from 'react-test-renderer'
+import { safeQuerySelector } from 'test-utils'
+import 'test-utils/next-env'
function stylisPlugin(element) {
if (element.type === 'decl' && element.value.startsWith('color:')) {
@@ -15,6 +17,11 @@ function render(ele) {
return renderer.create(ele).toJSON()
}
+beforeEach(() => {
+ safeQuerySelector('head').innerHTML = ''
+ safeQuerySelector('body').innerHTML = ''
+})
+
test('with custom plugins', () => {
let cache = createCache({
key: 'custom-plugins',
@@ -38,3 +45,46 @@ test('with custom plugins', () => {
/>
`)
})
+
+test('Global should "inherit" sheet class from the cache', () => {
+ // https://github.com/emotion-js/emotion/issues/2675
+ let cache = createCache({
+ key: 'test',
+ speedy: false
+ })
+ class MySheet extends StyleSheet {
+ insert(rule) {
+ super.insert(`/** ${this.key} */${rule}`)
+ }
+ }
+ cache.sheet = new MySheet({
+ key: 'test',
+ container: safeQuerySelector('head')
+ })
+
+ render(
+