我目前需要将库的通用组件集成到多个网站中。组件库当前有全局样式。他们通过以下方式注入(inject):
<Global
styles={`
div {
padding: 0;
}
`}
/>
我希望“全局样式”仅适用于该库的组件。它们仅位于页面的一部分上。
所以我尝试了这个:
const Styles = styled.div`
div {
padding: 0;
}
`;
const Page = () => (
<Styles>
<SomeComponentsOfTheLibrary />
</Styles>
);
但似乎Styles
中的所有内容都有优先级。然后,如果组件具有 padding: 10px;
,它将采用 Styles
padding: 0;
以下是重现的问题:
我知道这是一个CSS问题,但我想用情感来解决它
我已经看到了:
最佳答案
How to move global styles into a scope for emotion ?
@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/