Limit emotion global styles to a narrower selector

Question

Is there a way to limit the styles that emotion injects into the global scope to a narrower scope?

I've seen this method of using a stylis plugin to add more narrowly-scoped styles, but that only adds scoped styles. What I'd like to do is limit all styles added by emotion to a particular selector.

The SCSS equivalent of what I'm looking for is something like this, where the styles would only apply to elements where div#my-styled-div is an ancestor:

div#my-styled-div {
  h1, h2, h3, h4, h5, h6 {
    // emotion header styles
  }

  button {
    // emotion button styles
  }
}

My use case is a Docusaurus site with a demo page that uses Chakra UI (specifically the Chakra UI demo page for react-querybuilder) and I don't want the emotion global styles to affect the Docusaurus theme styles.

(This question is similar, but it was never answered and I don't think it's exactly the same issue anyway.)

Answer 1

Emotion supports SCSS-like nesting, so you can define styles which only apply inside of a specific element like this:

import { css } from "@emotion/react";

const myCss = css`
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: red;
  }

  button {
    /* ... */
  }
`;

export default function App() {
  return (
    <div>
      <h2>Emotion styles don't apply to this h2</h2>
      <div css={myCss}>
        <h2>Emotion styles apply to this h2</h2>
        {/* Put the stuff you want to style with Emotion here */}
      </div>
    </div>
  );
}

CodeSandbox