Next.js: How to change css of root div _

I want to change div which the id is __next on login page. But when I add style in jsx, it seems change to another div with id #__next.jsx-2357705899, .main.jsx-2357705899 while dom mounts to page.

How could I change css of __next div when login page is mount?

<style jsx>{`
  #__next,
  .main {
    height: 100%;
  }
`}</style>

How do I style a component in next JS?

The easiest way to write CSS in a Next. js application is through its global stylesheet. Every newly created Next. js project comes with a styles folder and inside it, a global.

How do I use external CSS in next Javascript?

You can add the css file in head of nextjs. and in the render method, inside the return add a head tag similar to ordinary HTML, the head tag should be inside a div. also the css should be in static folder. Add a key to the link tag to reuse the css in multiple pages.

How do I add components to Nextjs CSS?

Adding global stylesheets: To add a global stylesheet in a Next Js app, basically, the CSS rules which will apply to the entire app, just import the CSS file to the pages/_app. js. For example, we have a CSS file named “style. css” in our “styles” folder.

Where is global CSS in next JS?

Global CSS Must Be in Your Custom \<App> An attempt to import Global CSS from a file other than pages/_app. js was made. Global CSS cannot be used in files other than your Custom <App> due to its side-effects and ordering problems.

Next.JS' Styled JSX allows you to add a global keyword to your <style> element. Here's how one would customize the __next div.

In your pages/_document.js do this:

// pages/_document.js
import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head />
        <body>
          <Main />
          <NextScript />
          <style jsx global>{`
            /* Other global styles such as 'html, body' etc... */

            #__next {
              height: 100%;
            }
          `}</style>
        </body>
      </html>
    );
  }
}

Maybe this helps someone.
create a folder "styles" add "globals.css"

add this to that file

@tailwind components;
@tailwind utilities;
@layer components {
    #__next {
        @apply h-full bg-red-500;
    }
    html,
    body {
        @apply h-full;
    }
}

go to your _app.js and import the above stylesheet.

One of the workarounds you can do is manually adding a class to #__next on Login Page and then globally style it

import React from 'react';

export default class LoginPage extends React.Component {
  componentDidMount() {
    document.getElementById('__next').classList.add('login-page');
  }

  componentWillUnmount() {
    document.getElementById('__next').classList.remove('login-page');
  }

  render() {
    return (
      <div>
        Login page
        <style jsx global>{`
          .login-page {
            background-color: red;
          }
        `}</style>
      </div>
    );
  }
}

Next.js: How to change css of root div __next on specific page?

Tags:

reactjs

jsx

next.js

Rukeith

People also ask

3 Answers

SkyzohKey

Peter

iurii

Recent Activity

Donate For Us