能不能修改NextJS的挂载元素或者把类加到__nextdiv？

Question

长话短说，我正在做一个项目，我想让内容“填充”静态 header 下方的垂直 space。我在 React 中用这样的 tailwind 做了这个：

<body class="flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal">
    <header class="flex h-18 bg-white shadow-md">
        {/* header menu options */}
    </header>
    <div class="flex flex-1 h-full bg-gray-200 p-6">
        {/* page content */}
    </div>

但是对于 NextJS，它似乎将安装 div（即 <div id="__next">）放在 body 和内容的其余部分之间。如果我修改 CSS 以提供 #__next { height: %100 } 但这会使填充无法正常工作，它会溢出。所以它看起来像这样：

<body class="flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal">
    <div id="__next">
        <header class="flex h-18 bg-white shadow-md">
            {/* header menu options */}
        </header>
        <div class="flex flex-1 h-full bg-gray-200 p-6">
            {/* page content */}
        </div>
    </div>

以下是屏幕截图，可以直观地了解额外 div 导致问题的原因：https://imgur.com/a/dHRsDkY

解决此问题的两个理论上可能可行的选项是将类添加到 #__next div 或挂载到 body 而不是 #__next div。有谁知道如何实现其中任何一个？

编辑：是的，我想我可以将布局更改为固定的 header 并在内容元素顶部填充，这样可以回避问题，最终可能成为我需要的解决方法，但是我仍然很想知道我提到的任何一种解决方案是否可行，因为如果它们不可行，那将是 NextJS 的技术限制，不会引起太多关注。

Answer 1

您可以通过在 ./pages/_document.js

中创建自定义文档来更改 html 或 body 标签

import Document, { Html, Head, Main, NextScript } from 'next/document'

class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body className="custom-class-name">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default CustomDocument

请注意，这些标签确实需要包含在您的文件中：<Html>、<Head />、<Main /> 和 <NextScript />。

这是full documentation

在您的情况下，具有 __next id 的元素正是该元素呈现的内容，并且它是安装主应用程序所必需的。所以你不能删除它或编辑它。我认为您可以在 _document.js 中添加一些针对 #__next 的 css，使用 tailwind 中的 @apply 指令可能是替代编辑 HTML 的方法元素（因为它似乎不可能）

Answer 2

我不熟悉顺风但我做了一些研究，我通过从 body 中删除类并将它们应用到 #__next 容器 div:

我使用此 example 中的方法将 tailwind 与 Next.js 结合使用。

然后我编辑了styles/index.css

@tailwind base;

/* Write your own custom base styles here */
/* #__next {
  height: 100%;
} */

/* Start purging... */
@tailwind components;
/* Stop purging. */

html,
body {
  @apply bg-gray-50 dark:bg-gray-900;
}

#__next {
  @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;
}

/* Write your own custom component styles here */
.btn-blue {
  @apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

如您所说，重点是将类添加到 #__next 而不是 body。

正如您在评论中看到的，在何处添加@apply 指令很重要。

重要的几行是：

#__next {
  @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;
}

正如您在问题标题中所问，这是向 #__next 容器 div.

添加顺风样式的一种方法

另一种解决方案是在使用 componentDidMount() 生命周期挂钩或 useEffect 挂钩加载组件或页面后设置类，如下所示：

useEffect(() => {
    document.querySelector("#__next").className =
      "flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal";
  }, []);

如果您查看有关 Custom document 的 Next.js 文档，您会发现 Main 组件和 NextScript 是 Next.js 的内部结构并且需要正确呈现页面并且您不能更改 Next.js 内部结构所以我认为上面提到的解决方案是 添加类到 #[=48 的最佳方法=]容器div.

Answer 3

无需在 NextJS 的技术根元素 (#__next) 之间注入或替换元素。只需拉伸应用程序根元素的所有父元素即可占据所有屏幕高度 100vh（vh 是“垂直高度”，一个单位是视口高度的 1%）。

html, body, #__next, #app {
  min-height: 100vh;
}

您的 HTML 可能如下所示：

<html>
<head><!-- head content --></head>
<body>
  <div id="__next">
    <div id="app"><!-- this is your app's top element --></div>
  </div>
</body>
</html>

Answer 4

我发现更新 styles/globals.css 是实现此目的最简单的方法。

/*
  Extend the top most enclosing elements to entire height of the screen 
  to allow for the background image to fill the entire screen
*/
html,
body,
#__next {
  height: 100%;
}

请注意，global.css 必须导入到 _app.tsx

能不能修改NextJS的挂载元素或者把类加到__nextdiv？

Can you modify NextJS mount element or add classes to __next div?

javascript

css

jsx

next.js

tailwind-css