How do I add custom CSS at the end of the <head> ? #13533

srikanth912 · 2020-05-29T04:47:45Z

srikanth912
May 29, 2020

Hello All,

We are building a multitenant application and would like to allow customers to overwrite the default theme CSS. For this we allow customers to add their own CSS which is retrieved via API as a variable (let's say customCSS).

We would like to insert this at the end of the <head> tag like <style>{customCss}</> after next.js generated styles (which is the default theme CSS).

Tried below but it's not coming at the end (Stripped irrelevant meta tags).

import React from 'react';
import NextHead from 'next/head';

const SiteHead = (props) => {
  return (
    <NextHead>
      <style>
        {customCSS}
      </style>
    </NextHead>
  );
};

srikanth912 · 2020-05-29T10:30:34Z

srikanth912
May 29, 2020
Author

I've tried adding custom CSS in _document.js as well but the same results (custom CSS coming before other styles which are imported in _app.js).

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';

const customCss = "body {color: red}"

class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const { html, head, styles } = await Document.getInitialProps(ctx);
    return { html, head, styles };
  }

  render() {
    return (
      <Html>
        <Head>
          <style>{customCss} </style>
        </Head>
        
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

0 replies

srikanth912 · 2020-05-30T13:02:41Z

srikanth912
May 30, 2020
Author

Still stuck with this issue. Any help would be much appreciated.

0 replies

srikanth912 · 2020-06-05T12:54:44Z

srikanth912
Jun 5, 2020
Author

Just bumping this thread so someone can point me in the right direction.

0 replies

jamesmosier · 2020-06-05T13:09:51Z

jamesmosier
Jun 5, 2020

As far as I know there is not way to specify the order an element gets added to next/head. Maybe someone else has ideas, but I would think you might be on your own as far as appending styles. Something like this:

const SiteHead = (props) => {
  React.useEffect(() => {
    const style = document.createElement('style');
    style.innerText = 'body { color: green; }'
    const head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
  }, [])

  return ( ...

0 replies

revskill10 · 2020-06-05T13:24:18Z

revskill10
Jun 5, 2020

You can try adding this to <Head> component

<style
      id="holderStyle"
      dangerouslySetInnerHTML={{
         __html: `
         *, *::before, *::after {
           transition: none!important;
         }
         `,
      }}/>

1 reply

srikanth912 Jun 5, 2020
Author

I've tried this before and doesn't make any difference in the ordering.

ArthurClemens · 2020-12-28T22:27:21Z

ArthurClemens
Dec 28, 2020

If anyone arrives here from Google: use style jsx or style jsx global:

<style jsx global>{`
  body {
    background: #000;
  }
`}</style>

1 reply

coderdix Jun 2, 2021

If anyone arrives here from Google: use style jsx or style jsx global:
<style jsx global>{`
  body {
    background: #000;
  }
`}</style>

i dont think this works with SSR sites :-(

fmal · 2021-08-18T18:45:34Z

fmal
Aug 18, 2021

@srikanth912 i think the solution in the following example would solve your case: https://github.com/ben-rogerson/twin.examples/blob/b52ac511ebf221471a01fea1c77d90b19a6eb5dc/next-stitches-typescript/pages/_document.tsx

2 replies

AndrewPrifer Aug 26, 2021

This.

ajayjaggi97 Jul 14, 2022

Thanks for this ❤️

AdrianMachado · 2023-07-12T00:09:33Z

petersvegrup · 2024-05-07T08:14:00Z

petersvegrup
May 7, 2024

I'm quite late to the party and this might already have been solved, but try using CSS cascade layers and add customCSS to a layer that is defined as last in the specificity order. https://developer.mozilla.org/en-US/docs/Web/CSS/@layer. Let me know if it works.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How do I add custom CSS at the end of the <head> ? #13533

{{title}}

Replies: 9 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How do I add custom CSS at the end of the <head> ? #13533

Replies: 9 comments · 7 replies

srikanth912 May 29, 2020 Author

srikanth912 May 30, 2020 Author

srikanth912 Jun 5, 2020 Author

srikanth912 Jun 5, 2020 Author

Replies: 9 comments 7 replies

srikanth912
May 29, 2020
Author

srikanth912
May 30, 2020
Author

srikanth912
Jun 5, 2020
Author

srikanth912 Jun 5, 2020
Author