diff --git a/.changeset/dry-frogs-perform.md b/.changeset/dry-frogs-perform.md
new file mode 100644
index 000000000..8804a2ee4
--- /dev/null
+++ b/.changeset/dry-frogs-perform.md
@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Fixed styles inserted by `` component not inheriting `speedy` option from a cache passed to a wrapping ``.
diff --git a/packages/react/__tests__/css.js b/packages/react/__tests__/css.js
index 007f2189c..248d27f3d 100644
--- a/packages/react/__tests__/css.js
+++ b/packages/react/__tests__/css.js
@@ -1,8 +1,9 @@
// @flow
/** @jsx jsx */
import 'test-utils/next-env'
+import { safeQuerySelector } from 'test-utils'
import * as React from 'react'
-import { jsx, css, CacheProvider, ThemeProvider } from '@emotion/react'
+import { jsx, css, Global, CacheProvider, ThemeProvider } from '@emotion/react'
import { render } from '@testing-library/react'
import renderer from 'react-test-renderer'
import createCache from '@emotion/cache'
@@ -14,6 +15,7 @@ console.warn = jest.fn()
afterEach(() => {
jest.clearAllMocks()
+ safeQuerySelector('body').innerHTML = ''
})
const SomeComponent = (props: { lol: true }) => (props.lol ? 'yes' : 'no')
@@ -173,6 +175,19 @@ test('can set speedy via custom cache', () => {
expect(cache.sheet.tags).toHaveLength(1)
})
+test('speedy option from a custom cache is inherited for styles', () => {
+ let cache = createCache({
+ container: safeQuerySelector('body'),
+ speedy: true
+ })
+ renderer.create(
+
+ >
+
+ )
+ expect(safeQuerySelector('body style').textContent).toEqual('')
+})
+
test('autoLabel without babel', () => {
let SomeComp = props => {
return (
diff --git a/packages/react/src/global.js b/packages/react/src/global.js
index 0ab8bf125..45c202675 100644
--- a/packages/react/src/global.js
+++ b/packages/react/src/global.js
@@ -92,7 +92,8 @@ export let Global: React.AbstractComponent<
let sheet = new StyleSheet({
key: `${cache.key}-global`,
nonce: cache.sheet.nonce,
- container: cache.sheet.container
+ container: cache.sheet.container,
+ speedy: cache.sheet.isSpeedy
})
// $FlowFixMe
let node: HTMLStyleElement | null = document.querySelector(