How to move global styles into scope for emotion ?

[JulienKode]

Thank you for this nice library and all effort that you make 🏋🏼‍♀️

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:

• Working directly with classNames using createEmotion post-Emotion v10 #1264
• Custom CacheProvider does not pick up styles from bundled components #1386
• Feature: Adding selector scoping for generated classNames #760

[JulienKode]

https://stackoverflow.com/questions/60567233/how-to-move-global-styles-into-a-scope-for-emotion

[Andarist]

Demo which I've posted on Twitter regarding this issue can be found here: https://codesandbox.io/s/upbeat-morning-8rfur

I believe this solves the problem in the best possible way. Emotion styles are just styles, so if you integrate with non-emotion styles you, unfortunately, need to fight specificity wars.

[JulienKode]

Thank you again @Andarist 😊

I've update the stack overflow post: https://stackoverflow.com/questions/60567233/how-to-move-global-styles-into-a-scope-for-emotion with your best solution

[Chinomso1995]

@Andarist what if the children are of a different CSS framework. Like they are based off tailwind and I want them to retain their original styles and not the one from the global styles.