diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js
index 946a59a0b93..8dc2dc788c8 100644
--- a/src-docs/src/components/codesandbox/link.js
+++ b/src-docs/src/components/codesandbox/link.js
@@ -165,7 +165,7 @@ import { Demo } from './demo';
const cache = createCache({
key: 'codesandbox',
- container: document.querySelector('meta[name="global-styles"]'),
+ container: document.querySelector('meta[name="emotion-styles"]'),
});
ReactDOM.render(
@@ -182,7 +182,7 @@ ReactDOM.render(
-
+
diff --git a/src-docs/src/index.html b/src-docs/src/index.html
index f4d78fe372f..f4e964b07d6 100644
--- a/src-docs/src/index.html
+++ b/src-docs/src/index.html
@@ -14,7 +14,7 @@
-
+
diff --git a/src-docs/src/views/app_context.js b/src-docs/src/views/app_context.js
index 72166629eaa..e3481f978a6 100644
--- a/src-docs/src/views/app_context.js
+++ b/src-docs/src/views/app_context.js
@@ -19,7 +19,7 @@ import favicon96Dev from '../images/favicon/dev/favicon-96x96.png';
const emotionCache = createCache({
key: 'eui-docs',
- container: document.querySelector('meta[name="emotion-global"]'),
+ container: document.querySelector('meta[name="emotion-styles"]'),
});
export const AppContext = ({ children }) => {
diff --git a/src-docs/src/views/provider/provider_example.js b/src-docs/src/views/provider/provider_example.js
index ddd455c07e6..3ac7aebd13a 100644
--- a/src-docs/src/views/provider/provider_example.js
+++ b/src-docs/src/views/provider/provider_example.js
@@ -87,10 +87,10 @@ export const ProviderExample = {
@emotion/cache and style injection location
- In the case that your app has its own static stylesheet, the global
- styles may not be injected into the correct location in the{' '}
- {''}, causing unintentional overrides or
- unapplied styles.{' '}
+ In the case that your app has its own static stylesheet,{' '}
+ @emotion styles may not be injected into the
+ correct location in the {''}, causing
+ unintentional overrides or unapplied styles.{' '}
The @emotion/cache library
{' '}
diff --git a/src-docs/src/views/provider/provider_styles.tsx b/src-docs/src/views/provider/provider_styles.tsx
index 0a77d8918c7..2b2210f4a51 100644
--- a/src-docs/src/views/provider/provider_styles.tsx
+++ b/src-docs/src/views/provider/provider_styles.tsx
@@ -13,7 +13,7 @@ export default () => {
My App
-
+
@@ -30,7 +30,7 @@ import createCache from '@emotion/cache';
const cache = createCache({
key: 'myApp',
- container: document.querySelector('meta[name="global-style-insert"]'),
+ container: document.querySelector('meta[name="emotion-style-insert"]'),
});
diff --git a/src/components/provider/__snapshots__/provider.test.tsx.snap b/src/components/provider/__snapshots__/provider.test.tsx.snap
index a3406605c96..cb2bcb2e0d7 100644
--- a/src/components/provider/__snapshots__/provider.test.tsx.snap
+++ b/src/components/provider/__snapshots__/provider.test.tsx.snap
@@ -930,6 +930,27 @@ exports[`EuiProvider is rendered 1`] = `
exports[`EuiProvider providing an @emotion cache config applies the cache to global styles 1`] = `
,
+ "ctr": 0,
+ "insertionPoint": undefined,
+ "isSpeedy": false,
+ "key": "testing",
+ "nonce": undefined,
+ "prepend": undefined,
+ "tags": Array [],
+ },
+ }
+ }
theme={
Object {
"animation": Object {
@@ -1229,31 +1250,7 @@ exports[`EuiProvider providing an @emotion cache config applies the cache to glo
}
}
>
- ,
- "ctr": 0,
- "insertionPoint": undefined,
- "isSpeedy": false,
- "key": "testing",
- "nonce": undefined,
- "prepend": undefined,
- "tags": Array [],
- },
- }
- }
- >
-
-
+
`;
diff --git a/src/components/provider/provider.tsx b/src/components/provider/provider.tsx
index 952e80cdbfd..feba9435be9 100644
--- a/src/components/provider/provider.tsx
+++ b/src/components/provider/provider.tsx
@@ -7,7 +7,7 @@
*/
import React, { PropsWithChildren } from 'react';
-import { CacheProvider, EmotionCache } from '@emotion/react';
+import { EmotionCache } from '@emotion/react';
import {
EuiGlobalStyles,
@@ -46,19 +46,14 @@ export const EuiProvider = ({
colorMode,
modify,
children,
-}: PropsWithChildren>) => {
- return theme !== null && GlobalStyles !== false ? (
-
- {cache ? (
-
-
-
- ) : (
-
- )}
- {children}
-
- ) : (
- {children}
- );
-};
+}: PropsWithChildren>) => (
+
+ {theme !== null && GlobalStyles !== false ? : null}
+ {children}
+
+);
diff --git a/src/services/theme/provider.tsx b/src/services/theme/provider.tsx
index 508e01f7b74..6d2c8ba1ddb 100644
--- a/src/services/theme/provider.tsx
+++ b/src/services/theme/provider.tsx
@@ -13,6 +13,7 @@ import React, {
useState,
PropsWithChildren,
} from 'react';
+import { CacheProvider, EmotionCache } from '@emotion/react';
import isEqual from 'lodash/isEqual';
import {
@@ -33,6 +34,7 @@ export interface EuiThemeProviderProps {
theme?: EuiThemeSystem;
colorMode?: EuiThemeColorMode;
modify?: EuiThemeModifications;
+ cache?: EmotionCache;
children: any;
}
@@ -40,6 +42,7 @@ export const EuiThemeProvider = ({
theme: _system,
colorMode: _colorMode,
modify: _modifications,
+ cache,
children,
}: PropsWithChildren>) => {
const parentSystem = useContext(EuiSystemContext);
@@ -120,7 +123,11 @@ export const EuiThemeProvider = ({
- {children}
+ {cache ? (
+ {children}
+ ) : (
+ children
+ )}
diff --git a/upcoming_changelogs/5831.md b/upcoming_changelogs/5831.md
new file mode 100644
index 00000000000..06b25b7ff52
--- /dev/null
+++ b/upcoming_changelogs/5831.md
@@ -0,0 +1,2 @@
+- Updated the use of `@emotion/cache` to include all `@emotion` styles
+