Next.js页面被``元素包裹，如何解决样式设置难题？

next.js页面被<div id="_next">元素包裹导致样式设置困难的<a style="color:#f60; text-decoration:underline;" title="解决方法" href="https://www.php.cn/zt/19667.html" target="_blank">解决方法</a> <p><img src="https://img.php.cn/upload/article/001/246/273/174082033696474.jpg" alt="Next.js页面被``元素包裹，如何解决样式设置难题？"></p> <p>在使用Next.js页面路由模式开发项目时，开发者经常会遇到一个<code><div id="_next">元素包裹整个页面的情况。这给自定义页面样式，例如实现100%高度和水平<a style="color:#f60; text-decoration:underline;" title="垂直居中" href="https://www.php.cn/zt/62690.html" target="_blank">垂直居中</a>布局，带来了挑战。本文将解释此元素的来源及解决方法。 <p>问题：开发者尝试使用<code>#next {}选择器在全局CSS中设置样式，但无效。这是因为选择器错误，正确的选择器应为#_next（注意下划线）。

难题一：页面无法撑满100%高度，只能使用100vh作为变通方案。

难题二：无法实现水平垂直居中，因为找不到<div id="_next">元素的父容器来应用<code>display: flex等属性。

原因：<div id="_next">元素由Next.js框架生成，用于管理页面渲染和组件挂载，并非用户自定义元素，因此直接在组件内操作无效。 <p>解决方案：使用正确的选择器<code>#_next在全局样式表（例如global.css）或页面组件中添加样式规则，例如#_next { ... }，即可修改该元素的样式，从而解决100%高度和水平垂直居中问题。

包阅AI

论文对照翻译，改写润色，专业术语详解，选题评估，开题报告分析，评审校对，一站式解决论文烦恼！

84

查看详情

如果全局样式表无效，请检查样式表的引入方式和CSS优先级问题，确保#_next样式能够覆盖其他样式。