如何将全局样式移动到情感范围内？

Question

我目前需要将图书馆的通用组件集成到多个网站中。组件库目前有一个全局样式。他们以下列方式注入：

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

我希望 "Global styles" 仅适用于此库的组件。它们只出现在页面的一部分。

所以我试过这个：

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

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

但是好像Styles里面的都优先。那么如果组件有 padding: 10px; 它将占用 padding: 0; of Styles

这里是转载的问题：

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

我知道这是一个 css 问题，但我想用情感解决它

我已经看过：

Answer 1

How to move global styles into a scope for emotion ?

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

例子

使用 stylis 插件为额外范围创建缓存

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

在缓存提供程序中使用您的全局样式

     <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>

然后您的全局样式将在 very-strong-id

范围内

你可以找到例子here

希望对以后的人有所帮助

如何将全局样式移动到情感范围内？

How to move global styles into a scope for emotion?

javascript

css

emotion

reactjs

例子

使用 stylis 插件为额外范围创建缓存

在缓存提供程序中使用您的全局样式