Next.js: 如何在特定页面上更改根 div __next 的 css？

Question

我想更改 div，登录页面上的 ID 是 __next。但是当我在 jsx 中添加样式时，它似乎更改为另一个 div id #__next.jsx-2357705899, .main.jsx-2357705899 while dom 装载到页面。

当登录页面挂载时，如何更改 css of __next div？

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

Answer 1

您可以采取的解决方法之一是在登录页面上手动将 class 添加到 #__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' Styled JSX 允许您向 <style> 元素添加 global 关键字。以下是如何自定义 __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>
    );
  }
}

Answer 3

也许这对某人有帮助。
创建文件夹“样式”添加“globals.css”

将其添加到该文件

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

转到您的 _app.js 并导入上面的样式表。

Next.js: 如何在特定页面上更改根 div __next 的 css？

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

reactjs

jsx

next.js