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