Html 可以在样式标记中使用样式标记吗？

嘿，我在设计系统库中使用样式化组件来处理css。 我在使用应用程序时遇到了麻烦，如果不使用

，就无法覆盖我们组件的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>
  );

let targetStylesheet:HTMLStyleElement；
函数createLowPriorityStylesheet（）{
const stylesheet=document.createElement（'style'）；
setAttribute（'type'，'text/css'）；
document.getElementsByTagName（'head'）[0].prepend（样式表）；
返回样式表；
}
...
如果（！targetStylesheet&&！isTest（））{
targetStylesheet=createLowPriorityStylesheet（）；
}
返回(
);

我正在创建一个

标记和pre将其挂起到头部，样式化组件将

标记作为我创建的svg标记的子项注入

这个解决方案似乎很好，但我找不到信息说这是一个有效的方法，也找不到任何人谈论你为什么不应该这样做

---

这种方法有什么缺点吗？

你不能确保你的样式表是最后加载的吗？@Grumpy我发现控制样式化组件附加位置的唯一方法是使用

StyleSheetManager

的目标道具。但是因为它是附加的，并且没有前置，所以我不能让它写在head标签上，因为这会使我的风格具有更高的优先级。通过在头部预先设置svg，并让styled将其样式写入其中，我可以降低样式的优先级。