How to move global styles into a scope for emotion?

I'm currently need to integrate common components of a library into multiples websites. The component Library currently have a Global styles. That they inject in the following way:

  <Global
    styles={`
        div {
          padding: 0;
        }
    `}
  />

I want there "Global styles" only available for the components of this library. They are only on a part of the page.

So I've try this:

const Styles = styled.div`
        div {
          padding: 0;
        }
`;

const Page = () => (
    <Styles>
        <SomeComponentsOfTheLibrary />
    </Styles>
);

But it seems that everything in Styles has the priority. Then if the component has padding: 10px; it will take padding: 0; of Styles

Here is the issue reproduced:

https://codesandbox.io/s/infallible-glitter-g3gbd

I know it's a css issue but I want to solve it with emotion

I've already saw:

Solution

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 😊