问题
I am currently importing CSS files in one of my components. Those style sheets are added as link tags in <head>, and will be globally available:
import './src/styles/normalize.module.css';
I am also using styled-components.
Currently, the link tags generated by the global CSS imports land below the styled-component style tags, in <head>:
I would like the styled-components to be more specific, i.e. appear above the link tags from the CSS imports.
Is there any way to accomplish that?
PS: I am using GatsbyJS, but that's probably not relevant to the question.
回答1:
Gatsby does have a place where you can control the order of tags in the head components, it's onPreRenderHTML.
However I fiddled with it a bit and it wasn't helpful, as imported css was not extracted during gatsby develop & styled component didn't seem to have attached its style tag in this hook.
There're still 2 things I tried that works, both described in this docs.
- import global css to
gatsby-browser.js. It seems that the imported styles there got picked up first - let styled-components handle global style via createGlobalStyle (This is not always possible if you use 3rd party css.)
回答2:
If you have a layout something like this, try importing your global inside <App />
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
来源：https://stackoverflow.com/questions/55515652/moving-global-style-sheets-above-styled-components-in-head