Next.js:如何在特定页面上更改根 div __next 的 css? [英] Next.js: How to change css of root div __next on specific page?

问题描述

我想在登录页面上更改 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屋！