javascript - 如何将全局风格转变为情感范围？

我目前需要将图书馆的常见组件集成到多个网站中。组件库当前具有全局样式。他们以下列方式注入(inject):

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

我想要那里“全局样式”仅适用于该库的组件。它们仅在页面的一部分上。

所以我尝试了这个:

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

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

但是，似乎Styles中的所有内容都具有优先级。然后，如果组件具有padding: 10px;，它将采用padding: 0;的Styles
这是转载的问题:

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

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

我已经看到:

https://github.com/emotion-js/emotion/issues/1264

https://github.com/emotion-js/emotion/issues/1386

https://github.com/emotion-js/emotion/issues/760

最佳答案

@Andarist通过创建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

希望将来对某人有帮助

关于javascript - 如何将全局风格转变为情感范围？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60567233/