Accepted answer

How to move global styles into a scope for emotion ?

@Andarist found a solution for that by creating a stylis plugin for extra scope


Create a cache with stylis plugin for extra scope

const STRONG_ID = 'very-strong-id';
const cache = createCache({
  stylisPlugins: [createExtraScopePlugin(`#${STRONG_ID}`)],

Use your global styles in the cache provider

     <CacheProvider value={cache}>
            div {
              background-color: red;
        <div id={STRONG_ID}>
          <div>I must be red (global style scoped to the parent div)</div>
            I must be blue (local style defined on this div)

Then your global styles will be scope by very-strong-id

You can find the example here

Hope it will help someone in the future 😊

Related Query

More Query from same tag