Nextjs:How to change css of root div __next on specific page?

Asked By: Anonymous

Here is my code on branch next. demo

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>

Solution

Answered By: Anonymous

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>
    );
  }
}
techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno