Question

这是我接下来在分支上的代码。 demo

我想在登录页面上更改ID为 __ next 的div。但是，当我在jsx中添加样式时，似乎将dom挂载到页面时，将其更改为另一个ID为 #__ next.jsx-2357705899，.main.jsx-2357705899 的div。挂载登录页面后，如何更改__next div的CSS？

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

Answer 1

您可以采取的解决方法之一是在登录页面上手动向#__next添加一个类，然后对其全局设置样式

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

Answer 2

Next.JS样式的JSX允许您向global元素添加<style>关键字。这是自定义__next div的方法。

在您的pages/_document.js中执行以下操作：

// 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>
    );
  }
}

Nextjs：如何在特定页面上更改root div __next的CSS？

2 个答案: