Javascript 在<；中的已设置样式的组件上方移动全局样式表；头>；

我目前正在我的一个组件中导入CSS文件。这些样式表作为

中的

链接

标记添加，并将在全球范围内提供：

import './src/styles/normalize.module.css';

我也使用样式化组件

当前，由全局CSS

import

s生成的

链接

标记位于

中的样式化组件

样式

标记下方：

我希望样式化的组件更加具体，即出现在CSS

import

s的

link

标记上方

有没有办法做到这一点

---

PS：我使用的是盖茨比JS，但这可能与问题无关。

盖茨比确实有一个地方可以控制头部组件中标签的顺序，这是一个很好的地方

然而，我对它做了一点修改，这并没有什么帮助，因为在gatsby开发期间没有提取导入的css&styled组件似乎没有在这个钩子中附加它的样式标记

还有两件事我试过了

• 将全局css导入gatsby browser.js。那里进口的款式似乎是最先流行起来的
• 让样式化组件通过处理全局样式（如果使用第三方css，这并不总是可能的。）

---

如果您有类似的布局，请尝试导入全局内部

“样式化组件更加具体”-具体性由规则集上的选择器决定，而不是样式表在DOM中的位置。更具体的规则将在后面的级联中出现。如果希望样式化组件CSS稍后出现在级联中，则需要生成的样式元素出现在链接元素之后，而不是之前。@Quentin是的。我希望样式表被注入/移动到添加者的上方。为了清晰起见，添加了问题的图片。为了清楚起见，盖茨比的构建过程会自动按顺序添加问题。据我所知，我无法控制订单。所以我想知道是否有人知道如何改变这一点，例如通过一些样式化组件API或gatsby-browser.js/gatsby-ssr.js API。可以手动将其添加到html.js中，但是样式表必须是静态的，而不是带有散列文件名的动态的。我理解您在

中的样式顺序有问题。但是如果只有

normalize.css有问题，您可以使用Hi-Derek，谢谢您的输入。我注意到，当我创建了一个新的Gatsby项目，其中只包含样式化的组件和在Gatsby-browser.js中导入的globals CSS时，正如您所指出的，最初的顺序是正确的。然而，在添加了布局组件、MUI主题化和其他软件包之后，顺序发生了变化。突然之间，链接到了尽头。我不完全清楚为什么会发生这种情况，我也不确定我们是否可以相信这种自动排序？createGlobalStyle方法确实有效，但将所有重置和规范化全局CSS放入
CSS`.`
标记中有点不方便（我这样做了，然后将其导入并插入createGlobalStyle）.我还要补充一点。在盖茨比插件中，这种类型的注入发生在
onRenderBody
中。我玩过它，能够通过编程将
链接
元素注入
头部
。但是，webpack没有解析
链接中的URL，因此在全部构建之后，它就无法工作了。我想在head中使用
style
元素是可行的，但是为了将其导出，您又不得不在
CSS`.
中编写全局CSS。@Magnus如果您有多个包都将元素注入head标记，在PreRenderHTML上探索
并尝试在那里重新排序标签可能是值得的，尽管
样式化组件
注入时间对我来说仍然是个谜，如果你发现了什么，请分享。在使用prerenderHTML之前肯定不会发生这种情况。另一件事是指定插件的顺序可能会影响注入顺序。我现在没有测试的设置，但是在
gatsby config.js
中更改插件声明顺序，看看它是否表现得更好，这可能是值得的consistently@Magnus不过，在盖茨比构建期间，样式化组件标记似乎始终放在css导入之后。您是否发现构建和开发之间有任何不同的订单？
<ThemeProvider theme={theme}>
   <App />
</ThemeProvider>