[Solved]-How to move global styles into a scope for emotion?-Reactjs

How to move global styles into a scope for emotion ?

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

Example

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}>
        <Global
          styles={css`
            div {
              background-color: red;
            }
          `}
        />
        <div id={STRONG_ID}>
          <div>I must be red (global style scoped to the parent div)</div>
          <Container>
            I must be blue (local style defined on this div)
          </Container>
        </div>
      </CacheProvider>

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 😊