For CSS in my nextjs project I am using styled-jsx (https://github.com/vercel/styled-jsx).
All styled JSX tags (<style jsx>) will be appended at the end of the HTML <head> element.
However I have another native (non styled-jsx) HTML <style> tag that contains several CSS overrides. If I place my <style> tag in the nextjs <Head> component it will be placed in the HTML <head> element but above the other styled-jsx style tags. This will cause that the other styled-jsx <style jsx> tags will override my styles defined in my normal <style> tag. I want to achieve the other way around.
import Head from 'next/head';
<Head>
<style dangerouslySetInnerHTML={{ __html: props.css }} />
</Head>
I already tried to put my style tag outside of the <head> element but this is no option for me right now.
How can I put my native HTML <style> tag at the end of the HTML <head> element so other styles will be overridden?
If you are still looking for an answer:
My styles were overriden by styles like Bootstrap so I was also facing your problem.
In the end I decided to override the order in next/head by overriding next.js-Sourcecode.
This is the file you might need to override: https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx
You have to move {head} down.
After some research I decided to use a npm-module named patch-package. https://www.npmjs.com/package/patch-package It's straight forward and allows you to create a patch for the nextjs-Sourcecode.