Next.js：__next div 导致 css 样式故障

Question

I am trying to move my old static HTML project into Next.js, but the extra

<div id="__next">

is blocking some of class in my css stylesheet(eg. body > section ).

I tried to remove the extra div in inspect mode and it works. Just wondering how to remove it from the rendering? Thanks a bunch.

Answer 1

For class based react (can also use in constructor, componentWillMount will be deprecated)

componentWillMount() {
    let tar = document.getElementById('__next');
    tar.parentNode.innerHTML = tar.children[0].innerHTML;
 }

For react hook (Functional component)

useEffect(()=>{
        let tar = document.getElementById('__next');
        tar.parentNode.innerHTML = tar.children[0].innerHTML;
    })