Menu
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>
879
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.
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.
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.
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;
}
}
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>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
