Widget styles override consuming app styles

[jusa3]

Problem: The style issue stems from the global styles being injected by the EuiProvider from @elastic/eui and the Emotion CSS-in-JS library that it uses for theming and styling.

Temporary workaround: After the widget is rendered, remove the injected global styles. Specifically, the <style data-emotion="css-global" data-s=""></style> tag is dynamically generated by Emotion when global styles are applied, and it seems to override the app's existing styles, causing unintended changes. This happens because EuiProvider applies its own global styles which may conflict with or override the app’s styles. When we remove the style tag from the DOM, those global styles no longer apply.

[jusa3]

Solution for React: To avoid using global styles in the widgets, we need to prevent or limit the application of the global CSS rules that EuiProvider and Emotion's CSS-in-JS solution inject into the document. We can do this by using a CacheProvider as described here: emotion-js/emotion#1078

const styleElementId = "eui-local-style";
  
  const getOrCreateStyleElement = () => {
    let styleElement = document.querySelector(`#${styleElementId}`);
    if (!styleElement) {
      styleElement = document.createElement("style");
      styleElement.setAttribute("id", styleElementId);
      document.head.appendChild(styleElement);
    }
    return styleElement;
  };

  const createEmotionCache = () => {
    const styleElement = getOrCreateStyleElement();
    return createCache({
      key: "custom",
      container: styleElement
    });
  };

  const cache = createEmotionCache();


  return (
    <CacheProvider value={cache}>
      <EuiProvider colorMode="light">
        <EuiComboBox
        ...

This works well with React but not with the plainJS environment so the issue is still open.

[jusa3]

More hints:

• Another option could be using the EuiThemeProvider.
• Prevent using global style option: <EuiProvider colorMode="light" globalStyles={false}>
• Try with local build (npm run build:plainJS) and linking in this project: https://github.com/ts4nfdi/Workshop-FDM-Campus