Next.js：如何在特定页面上更改根 div __next 的 css？
Posted
技术标签:
【中文标题】Next.js：如何在特定页面上更改根 div __next 的 css？【英文标题】：Next.js: How to change css of root div __next on specific page? 【发布时间】：2019-01-25 02:40:03 【问题描述】：我想在登录页面上更改 id 为 __next 的 div。
但是当我在 jsx 中添加样式时，它似乎更改为另一个 id 为 #__next.jsx-2357705899, .main.jsx-2357705899 的 div，而 dom 安装到页面。
登录页面挂载时如何更改__next div的css？
<style jsx>`
#__next,
.main
height: 100%;
`</style>
【问题讨论】：
【参考方案1】：也许这对某人有帮助。 创建文件夹“styles”添加“globals.css” 将此添加到该文件中
@tailwind components;
@tailwind utilities;
@layer components
#__next
@apply h-full bg-red-500;
html,
body
@apply h-full;
【讨论】：
您可以针对特定页面进行编辑并给出解决方案【参考方案2】：Next.JS 的 Styled 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>
);
【讨论】：
这是处理 IMO 问题的最简单方法。【参考方案3】：您可以做的一种解决方法是在登录页面上手动将一个类添加到#__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>
);
【讨论】：
这个答案看起来是正确的，但这确实是一种丑陋的做法。请参阅我的答案以获得适当的解决方案。以上是关于Next.js：如何在特定页面上更改根 div __next 的 css？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Next.js 中将路径名从 _document 传递到 _app
如何在自定义 Express 服务器上呈现 Next JS 页面