Limit emotion global styles to a narrower selector

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.)