Is it possible to limit emotion CSS global styles to a few components.

[Chinomso1995]

I have this external project that is using emotion I am trying to integrate into my own react project and its breaking my styles because it has global styles applied to it. I am just wondering if it's possible to restrict the global styles to those components I need from that external project so it doesn't mess up the styles of my own project.

I have done this but I still cant get it work right

 const STRONG_ID = "very-strong-id";

  const cache = createCache({
    key: "layout",
    prepend: true,
    stylisPlugins: [createExtraScopePlugin(`#${STRONG_ID}`)],
  });


 <CacheProvider  value={cache}>
        <Global styles={Container} />
        <Header staticHeader={staticHeader} color={headerColor} />

        <div id={STRONG_ID}>{children}</div>

        <Footer>
          <div
            dangerouslySetInnerHTML={{
              __html: home.pageBy?.disclaimers.disclaimer,
            }}
          />
        </Footer>
      </CacheProvider>

The children are using Tailwind CSS

[jakeboone02]

FWIW, I put a similar question on SO, although not specific to Tailwind.