Next.js:如何在特定页面上更改根 div __next 的 css? [英] Next.js: How to change css of root div __next on specific page?
本文介绍了Next.js:如何在特定页面上更改根 div __next 的 css?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在登录页面上更改 id 为 __next
的 div.但是当我在 jsx 中添加样式时,它似乎更改为另一个 id 为 #__next.jsx-2357705899, .main.jsx-2357705899 的 div,而 dom 安装到页面.
登录页面挂载时如何更改__next
div的css?
<style jsx>{`#__下一个,.主要的 {高度:100%;}`}</style>
解决方案
您可以做的一种变通方法是手动将一个类添加到登录页面上的 #__next
中,然后对其进行全局样式化
从'react'导入反应;导出默认类 LoginPage 扩展 React.Component {组件DidMount() {document.getElementById('__next').classList.add('login-page');}组件WillUnmount() {document.getElementById('__next').classList.remove('login-page');}使成为() {返回 (登录页面<样式 jsx 全局>{`.登录页面{背景颜色:红色;}`}</style></div>);}}I want to change div which the id is __next
on login page.
But when I add style in jsx, it seems change to another div with id #__next.jsx-2357705899, .main.jsx-2357705899 while dom mounts to page.
How could I change css of __next
div when login page is mount?
<style jsx>{`
#__next,
.main {
height: 100%;
}
`}</style>
解决方案 One of the workarounds you can do is manually adding a class to #__next
on Login Page and then globally style it
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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文