嘿,我在设计系统库中使用样式化组件进行 css 处理。
我在使用应用程序时遇到问题,无法在不使用 !important
的情况下覆盖我们组件的 css。
问题源于我的样式组件在头部的末尾注入了它的样式表标签。 通过将它们的样式标签移回,我能够让消费应用轻松覆盖我的样式。
这是我的解决方法 -
let targetStylesheet: HTMLStyleElement;
function createLowPriorityStylesheet() {
const stylesheet = document.createElement('style');
stylesheet.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].prepend(stylesheet);
return stylesheet;
}
...
if (!targetStylesheet && !isTest()) {
targetStylesheet = createLowPriorityStylesheet();
}
return (
<StyleSheetManager target={targetStylesheet}>
<MyComponent />
</StyleSheetManager>
);
我正在创建一个 <svg>
标记并将其预挂到头部,样式化组件将注入 <style>
标记作为我创建的 svg 标记的子项。< /p>
这个解决方案似乎工作正常,但我找不到说明这是一种有效方法的信息,也找不到任何人在谈论为什么不应该这样做。
这种方法有什么缺点吗?