您可以在样式标签中使用样式标签吗？

Question

嘿，我在设计系统库中使用样式化组件进行 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>

这个解决方案似乎工作正常，但我找不到说明这是一种有效方法的信息，也找不到任何人在谈论为什么不应该这样做。

这种方法有什么缺点吗？