对于我的nextjs项目的CSS，我使用style -jsx (https://github.com/vercel/styled-jsx)。
所有样式的JSX标签(<style jsx>)将被附加在HTML<head>元素的末尾。
然而，我有另一个本地(非样式-jsx) HTML<style>标签，其中包含几个CSS覆盖。如果我将<style>标签放在nextjs的<Head>组件中，它将被放置在HTML<head>元素中，但高于其他样式的jsx样式标签。这将导致其他有样式的jsx<style jsx>标签将覆盖我在普通<style>标签中定义的样式。我想用另一种方式来实现。
import Head from 'next/head';
<Head>
<style dangerouslySetInnerHTML={{ __html: props.css }} />
</Head>
我已经尝试将我的样式标签放在<head>元素之外，但这对我来说现在没有选择。
我怎么能把我的本地HTML<style>标签在HTML<head>元素的末尾，这样其他样式将被覆盖?
如果你还在寻找答案:
我的样式被像Bootstrap这样的样式覆盖了，所以我也面临着你的问题。
最后我决定通过重写next.js- sourccode来重写next/head中的顺序。
这是你可能需要重写的文件:https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx
你必须把{head}往下移。
经过一番研究，我决定使用一个名为patch-package的npm-module。https://www.npmjs.com/package/patch-package它是直接的，并允许您为nextjs-源代码创建一个补丁。