diff --git a/CHANGELOG.md b/CHANGELOG.md
index c44c67a3d5c..9105584a43a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
- Added `lettering` glyph to `EuiIcon` ([#5525](https://github.com/elastic/eui/pull/5525))
- Updated the outline color in `euiCustomControlFocused` mixin to use `$euiFocusRingColor` instead of `currentColor` ([#5479](https://github.com/elastic/eui/pull/5479))
- Added `betaBadgeTooltipProps` to `EuiKeyPadMenuItem` to extend the wrapping `EuiToolTip` ([#5541](https://github.com/elastic/eui/pull/5541))
+- Added `globalStyles` prop to `EuiProvider` to allow for global style customization ([#5497](https://github.com/elastic/eui/pull/5497))
+- Exported `EuiGlobalStyles` component ([#5497](https://github.com/elastic/eui/pull/5497))
**Bug fixes**
diff --git a/package.json b/package.json
index d2c2c5d64b8..e9589f2b8bf 100644
--- a/package.json
+++ b/package.json
@@ -113,11 +113,11 @@
"@elastic/charts": "^41.0.1",
"@elastic/datemath": "^5.0.3",
"@elastic/eslint-config-kibana": "^0.15.0",
- "@emotion/babel-preset-css-prop": "^11.0.0",
- "@emotion/cache": "^11.4.0",
- "@emotion/eslint-plugin": "^11.0.0",
- "@emotion/jest": "^11.1.0",
- "@emotion/react": "^11.1.1",
+ "@emotion/babel-preset-css-prop": "^11.2.0",
+ "@emotion/cache": "^11.7.1",
+ "@emotion/eslint-plugin": "^11.7.0",
+ "@emotion/jest": "^11.7.1",
+ "@emotion/react": "^11.7.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"@svgr/core": "5.5.0",
"@svgr/plugin-svgo": "^4.0.3",
diff --git a/src-docs/src/views/provider/provider.md b/src-docs/src/views/provider/provider.md
deleted file mode 100644
index 7d0c5ce9d02..00000000000
--- a/src-docs/src/views/provider/provider.md
+++ /dev/null
@@ -1,66 +0,0 @@
-## Basic setup
-
-For EUI to work correctly, set up **EuiProvider** at the root of your application.
-
-```jsx
-import { EuiProvider } from '@elastic/eui'
-
-const MyApp = ({ Page }) => (
-
-
-
-);
-```
-
-See [**EuiThemeProvider**](/#/theming/theme-provider) for full documentation as all relevant props will pass through. For instance, it's likely that you will want to implement color mode switching at this level:
-
-```jsx
-
-```
-
-It is not recommended to recreate the functionality of **EuiProvider** by composing its constituent parts. More context, functionality, and configurations will be added to **EuiProvider** in future releases. Nested instances of [**EuiThemeProvider**](/#/theming/theme-provider), however, are valid.
-
-## Global reset
-
-A reset stylesheet and the global EUI styles are applied via Emotion. To prevent loading these styles from loading, pass `theme={null}` to the provider.
-
-### `@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. [The **@emotion/cache** library](https://emotion.sh/docs/@emotion/cache) provides configuration options that help with specifying the injection location. We recommend using a `` tag to achieve this.
-
-```html
-
-
-
-
- My App
-
-
-
-
-
-
-```
-
-```jsx
-// App.js
-import createCache from '@emotion/cache';
-import { EuiProvider } from '@elastic/eui'
-
-const cache = createCache({
- key: 'myApp',
- container: document.querySelector('meta[name="global-style-insert"]'),
-});
-
-const MyApp = () => (
-
- {/* Content */}
-
-);
-```
-
-Any other options available with [the **createCache** API](https://emotion.sh/docs/@emotion/cache#createcache) will be respected by EUI.
-
-Note that EUI does not include the `@emotion/cache` library, so you will need to add it to your application dependencies.
-
-
diff --git a/src-docs/src/views/provider/provider_example.js b/src-docs/src/views/provider/provider_example.js
index 15b34f89799..000b08f9789 100644
--- a/src-docs/src/views/provider/provider_example.js
+++ b/src-docs/src/views/provider/provider_example.js
@@ -2,13 +2,18 @@ import React from 'react';
import { Link } from 'react-router-dom';
import {
- EuiMarkdownFormat,
EuiText,
EuiProvider,
+ EuiCode,
+ EuiCodeBlock,
+ EuiLink,
+ EuiSpacer,
} from '../../../../src/components';
+
import { GuideSectionPropsTable } from '../../components/guide_section/guide_section_parts/guide_section_props_table';
-const providerSource = require('!!raw-loader!./provider.md').default;
+import Setup from './provider_setup';
+import GlobalStyles from './provider_styles';
export const ProviderExample = {
title: 'Provider',
@@ -28,8 +33,93 @@ export const ProviderExample = {
),
sections: [
{
- wrapText: false,
- text: {providerSource},
+ title: 'Basic setup',
+ text: (
+
+
+ For EUI to work correctly, set up EuiProvider at
+ the root of your application.
+
+
+
+
+
+ See{' '}
+
+ EuiThemeProvider
+ {' '}
+ for full documentation as all relevant props will pass through. For
+ instance, it's likely that you will want to implement color
+ mode switching at this level:
+
+
+
+ {""}
+
+
+
+
+
+ It is not recommended to recreate the functionality of{' '}
+ EuiProvider by composing its constituent parts.
+ More context, functionality, and configurations will be added to{' '}
+ EuiProvider in future releases. Nested instances of{' '}
+
+ EuiThemeProvider
+
+ , however, are valid.
+
+
+ ),
+ },
+ {
+ title: 'Global styles',
+ text: (
+
+
+ The provider includes general reset and global styles, applied via
+ Emotion. These only need to be applied once so to
+ prevent these styles from loading in nested instances of the
+ provider, pass
+ {'globalStyles={false}'}.
+
+
+
+ @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.{' '}
+
+ The @emotion/cache library
+ {' '}
+ provides configuration options that help with specifying the
+ injection location. We recommend using a{' '}
+ {''} tag to achieve this.
+
+
+
+
+
+ Any other options available with{' '}
+
+ the createCache API
+ {' '}
+ will be respected by EUI.
+
+
+
+ Note that EUI does not include the @emotion/cache{' '}
+ library, so you will need to add it to your application
+ dependencies.
+
+
+ ),
},
{
title: 'EuiProvider props',
diff --git a/src-docs/src/views/provider/provider_setup.tsx b/src-docs/src/views/provider/provider_setup.tsx
new file mode 100644
index 00000000000..e3d78c7b0c2
--- /dev/null
+++ b/src-docs/src/views/provider/provider_setup.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { EuiCodeBlock, useEuiTheme, isLegacyTheme } from '../../../../src';
+
+export default () => {
+ const { euiTheme, colorMode } = useEuiTheme();
+ const isLegacy = isLegacyTheme(euiTheme.themeName);
+
+ return (
+
+ {`import { EuiProvider } from '@elastic/eui';
+
+const MyApp = () => (
+
+ {/* Content */}
+
+);`}
+
+ );
+};
diff --git a/src-docs/src/views/provider/provider_styles.tsx b/src-docs/src/views/provider/provider_styles.tsx
new file mode 100644
index 00000000000..f4df4a9e0e1
--- /dev/null
+++ b/src-docs/src/views/provider/provider_styles.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {
+ EuiCodeBlock,
+ EuiSpacer,
+ useEuiTheme,
+ isLegacyTheme,
+} from '../../../../src';
+
+export default () => {
+ const { euiTheme, colorMode } = useEuiTheme();
+ const isLegacy = isLegacyTheme(euiTheme.themeName);
+
+ return (
+ <>
+
+ {!isLegacy
+ ? `
+
+
+
+ My App
+
+
+
+
+
+`
+ : `
+`}
+
+
+
+
+
+ {`// App.js
+import { EuiProvider } from '@elastic/eui'
+${
+ !isLegacy
+ ? `import createCache from '@emotion/cache';
+
+const cache = createCache({
+ key: 'myApp',
+ container: document.querySelector('meta[name="global-style-insert"]'),
+});
+`
+ : ''
+}
+
+ {/* Content */}
+
+ `}
+
+
+ );
+};
diff --git a/src/components/provider/__snapshots__/provider.test.tsx.snap b/src/components/provider/__snapshots__/provider.test.tsx.snap
index c43f660451e..20c28f010d0 100644
--- a/src/components/provider/__snapshots__/provider.test.tsx.snap
+++ b/src/components/provider/__snapshots__/provider.test.tsx.snap
@@ -1496,6 +1496,7 @@ exports[`EuiProvider providing an @emotion cache config applies the cache to glo
"before": null,
"container": ,
"ctr": 0,
+ "insertionPoint": undefined,
"isSpeedy": false,
"key": "testing",
"nonce": undefined,
diff --git a/src/components/provider/provider.tsx b/src/components/provider/provider.tsx
index c8f1a5c00a6..567ecbf4910 100644
--- a/src/components/provider/provider.tsx
+++ b/src/components/provider/provider.tsx
@@ -9,10 +9,7 @@
import React, { PropsWithChildren } from 'react';
import { CacheProvider, EmotionCache } from '@emotion/react';
-import {
- EuiGlobalStyles,
- EuiGlobalStylesProps,
-} from '../../global_styling/reset/global_styles';
+import { EuiGlobalStyles, EuiGlobalStylesProps } from '../../global_styling';
import {
EuiThemeProvider,
EuiThemeProviderProps,
@@ -28,24 +25,33 @@ export interface EuiProviderProps