gpt4 book ai didi

javascript - 将全局样式表移动到 中的样式组件之上

转载 作者:行者123 更新时间:2023-11-29 23:01:35 26 4
gpt4 key购买 nike

我现在是import在我的一个组件中处理 CSS 文件。这些样式表添加为 link <head> 中的标签,并将在全局范围内提供:

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

我也在使用 styled-components

目前,link全局 CSS 生成的标签 import s 位于 styled-component 下方 style标签,在 <head> 中:

Picture of <head>

我希望styled-components具体,即出现在上方 link来自 CSS 的标签 import

有什么办法可以做到吗?

PS:我正在使用 GatsbyJS,但这可能与问题无关。

最佳答案

Gatsby 确实有一个地方可以控制头部组件中标签的顺序,它是 onPreRenderHTML .

但是我稍微摆弄了一下它并没有帮助,因为导入的 css 在 gatsby 开发期间没有被提取并且样式化的组件似乎没有在这个钩子(Hook)中附加它的样式标签。

还有 2 个我尝试过的方法,both described in this docs.

  • 将全局 css 导入 gatsby-browser.js。看来那里的进口款式最先被采纳了
  • 让 styled-components 通过 createGlobalStyle 处理全局样式(如果您使用第 3 方 css,这并不总是可行的。)

关于javascript - 将全局样式表移动到 <head> 中的样式组件之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55515652/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com