mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
f2b07fc47d
## Summary Unfortunately, #161914 regressed #162365 in that many plugins and their Emotion styles (including EUI emotion styles) are now missing a cache and are being appended to to the end of the document `<head>` as opposed to within `<meta name="emotion">`. What appears to be happening is many plugins are using a parent `<KibanaThemeProvider>` but **not** a parent `<KibanaRootContextProvider>` (not sure if this work is TBD or in progress). This means that a parent `<EuiProvider>`, (which determines the cache insertion of child Emotion styled components) is missing, which is causing several CSS specificity bugs, e.g. around datagrid. As a somewhat-bandaid-y fix, I've bogarted EUI's nested provider context to check if the theme provider has a parent `EuiProvider`, and if it doesn't, to use `KibanaEuiProvider` instead of `KibanaThemeProvider`. This should set up the caches and context if needed, or otherwise simply use the original `KibanaThemeProvider` component. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Clint Andrew Hall <clint@clintandrewhall.com> |
||
|---|---|---|
| .. | ||
| assets | ||
| common | ||
| render | ||
| root | ||
| styled | ||
| theme | ||
| README.mdx | ||
--- id: react/context slug: /react/context title: React Contexts in Kibana description: Kibana uses React Context to manage several global states. This is a collection of packages supporting those states. tags: ['shared-ux', 'react', 'context'] date: 2023-07-25 --- ## Description Kibana uses React Context to manage several global states. Those states have been divided into several reusable components in relevant packages.  - `KibanaRootContextProvider` - A root context provider for Kibana. This is the top level context provider that wraps the entire application. It is responsible for initializing all of the other contexts and providing them to the application. - `KibanaRenderContextProvider` - A render context provider for Kibana. This context is designed to be used with ad-hoc renders of React components, (usually with `ReactDOM.render`). - `KibanaThemeContextProvider` - A theme context provider for Kibana. A corollary to EUI's `EuiThemeProvider`, it uses Kibana services to ensure the EUI Theme is customized correctly. ## Deprecated Context Providers - `KibanaStyledComponentsThemeProvider` - A styled components theme provider for Kibana. This package is supplied for compatibility with legacy code, but should not be used in new code.