entityMap|blocks|key|9vukt|text|这不完全是你想要的答案，但是我可以通过传递一个道具通过组件来完成同样的事情，然后更新一个顶级元素上的类，这个元素包装了我的应用程序中的所有东西，并位于下面。这样，每个页面都可以有自己的唯一类，并且操作方式与我使用body类的方式相同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bauo4|这里是我传递道具的地方|2jmqb|​下面是我在布局组件中使用它的地方：​|1rmvf|{props.children}|code-block|syntax|javascript|b0heb|​^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|Q|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|R|9|@]|A|@]|B|$]]]]

<p>It's not exactly the answer you are looking for, but I was able to accomplish the same thing functionally by passing a prop through the  component which then updates a class on a top-level  element that wraps everything in my app and sits just under the . This way each page can have it's own unique class and operates the same way I'd use a body class.</p>

<p>Here is where I pass the prop through 
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;Layout page_title={meta_title} page_desc={meta_desc} main_class={'contact_page'}&gt;</code></pre>
</div>
</div>
</p>

<p>And here is where I use it in the Layout component:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main className={props.main_class}&gt;
    &lt;Header page_title={props.page_title} page_desc={props.page_desc} /&gt;

      {props.children}

    &lt;Footer /&gt;
&lt;/main&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|bjfro|text|我发现的最干净的解决方案不是声明性的，但它工作得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|syntax|js|9h9j0|import+Head+from+"next/head"

class+HeadElement+extends+React.Component+{
++++componentDidMount()+{
++++++++const+{bodyClass}+=+this.props
++++++++document.querySelector("body").classList.add(bodyClass+%7C%7C+"light")
++++}

++++render()+{
++++++++return+
++++++++++++{/*+Whatever+other+stuff+you're+using+in+Head+*/}
++++++++
++++}
}

export+default+HeadElement|code-block|javascript|aqc32|使用这个Head组件，您将传入"dark“或"light”(按照问题的亮/暗主题示例)作为页面的bodyClass属性。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$C|D]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$C|H]]|$2|I|4|J|6|7|8|M|9|@]|A|@]|B|$]]]]

<p>The cleanest solution I found is not declarative, but it works well: </p>

<pre><code>import Head from "next/head"

class HeadElement extends React.Component {
    componentDidMount() {
        const {bodyClass} = this.props
        document.querySelector("body").classList.add(bodyClass || "light")
    }

    render() {
        return &lt;Head&gt;
            {/* Whatever other stuff you're using in Head */}
        &lt;/Head&gt;
    }
}

export default HeadElement
</code></pre>

<p>With this Head component you would pass in "dark" or "light" (following the question's example for light/dark themes) as the bodyClass prop from the page. </p>


entityMap|blocks|key|cb9sd|text|对于不需要很多唯一主体类的情况，我想出的解决方案是创建一个名为BodyClass.js的组件，并将该组件导入到我的Layout.js组件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310r2|BodyClass.js|offset|length|style|BOLD|2jl95|import++{+Component+}+from+'react';

class+BodyClass+extends+Component+{

++++componentDidMount()+{

++++++++if+(window.location.pathname+==+'/')+{
++++++++++++this.setBodyClass('home');
++++++++++++
++++++++}+else+if+(window.location.pathname+==+'/locations')+{
++++++++++++this.setBodyClass('locations');
++++++++}+
++++}

++++setBodyClass(className)+{
++++++++//+remove+other+classes
++++++++document.body.className+='';

++++++++//+assign+new+class
++++++++document.body.classList.add(className);
++++}

++++render()+{+
++++++++return+null;
++++}

}
+
export+default+BodyClass;|code-block|syntax|javascript|247k7|Layout.js|8tefo|import+Header+from+'./Header';
import+Footer+from+'./Footer';
import+BodyClass+from+'../BodyClass';

const+Layout+=+({+children+})+=>+{

++++return+(

++++++++

++++++++++++

++++++++++++

++++++++++++{children}
++++++++++++
++++++++++++

++++++++

++++)

}


export+default+Layout;^0|0|0|C|0|0|0|9|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|S|9|@$E|T|F|U|G|H]]|A|@]|B|$]]|$2|I|4|J|6|K|8|V|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|W|9|@$E|X|F|Y|G|H]]|A|@]|B|$]]|$2|P|4|Q|6|K|8|Z|9|@]|A|@]|B|$L|M]]]]

<p>The solution I came up with for my situation where I don't need a lot of unique body classes was to create a component called BodyClass.js and import that component into my Layout.js component.</p>
<h2>BodyClass.js</h2>
<pre><code>import  { Component } from 'react';

class BodyClass extends Component {

    componentDidMount() {

        if (window.location.pathname == '/') {
            this.setBodyClass('home');
            
        } else if (window.location.pathname == '/locations') {
            this.setBodyClass('locations');
        } 
    }

    setBodyClass(className) {
        // remove other classes
        document.body.className ='';

        // assign new class
        document.body.classList.add(className);
    }

    render() { 
        return null;
    }

}
 
export default BodyClass;
</code></pre>
<h2>Layout.js</h2>
<pre><code>import Header from './Header';
import Footer from './Footer';
import BodyClass from '../BodyClass';

const Layout = ({ children }) =&gt; {

    return (

        &lt;React.Fragment&gt;

            &lt;BodyClass /&gt;

            &lt;Header /&gt;

            {children}
            
            &lt;Footer /&gt;

        &lt;/React.Fragment&gt;

    )

}


export default Layout;
</code></pre>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://reactjs.org/docs/hooks-effect.html|1|https://reactjs.org/docs/hooks-overview.html|2|https://reactjs.org/docs/components-and-props.html|blocks|key|d7ov6|text|在当前的Next+(10)和React+(17)版本中，如果您想要更改页面中的body类，您可以这样做：|unstyled|depth|inlineStyleRanges|entityRanges|8jaqi|//+only+example:+maybe+you'll+want+some+logic+before,+
//+and+maybe+pass+a+variable+to+classList.add()
useEffect(+()+=>+{+document.querySelector("body").classList.add("home")+}+);|code-block|syntax|javascript|38mcq|请注意，useEffect是一个钩子，所以它只能在现代功能组件中使用，而不能在类组件中使用。|7a6ra|可以使用useEffect钩子来代替“旧的”componentDidMount+LifeCycle。|f20jn|offset|length|2cor9|42vrq^0|0|0|0|0|0|16|0|0|0|18|1|0|0|1E|2^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]|B|$2|3|4|5|6|$7|C]]]|D|@$E|F|G|H|2|I|J|10|K|@]|L|@]|6|$]]|$E|M|G|N|2|O|J|11|K|@]|L|@]|6|$P|Q]]|$E|R|G|S|2|I|J|12|K|@]|L|@]|6|$]]|$E|T|G|U|2|I|J|13|K|@]|L|@]|6|$]]|$E|V|G|8|2|I|J|14|K|@]|L|@$W|15|X|16|E|17]]|6|$]]|$E|Y|G|A|2|I|J|18|K|@]|L|@$W|19|X|1A|E|1B]]|6|$]]|$E|Z|G|C|2|I|J|1C|K|@]|L|@$W|1D|X|1E|E|1F]]|6|$]]]]

<p>As of current Next (10) and React (17) versions, If you'd like to change the body class from a page, you can can do it like this:</p>
<pre><code>// only example: maybe you'll want some logic before, 
// and maybe pass a variable to classList.add()
useEffect( () =&gt; { document.querySelector(&quot;body&quot;).classList.add(&quot;home&quot;) } );
</code></pre>
<p>Please note that useEffect is a Hook, so it can be used only in modern function components, not class ones.</p>
<p>The useEffect Hook can be used instead of the 'old' componentDidMount LifeCycle.</p>
<p><a href="https://reactjs.org/docs/hooks-effect.html" rel="noreferrer">https://reactjs.org/docs/hooks-effect.html</a>
<a href="https://reactjs.org/docs/hooks-overview.html" rel="noreferrer">https://reactjs.org/docs/hooks-overview.html</a>
<a href="https://reactjs.org/docs/components-and-props.html" rel="noreferrer">https://reactjs.org/docs/components-and-props.html</a></p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://github.com/nfl/react-helmet|blocks|key|d2i1k|text|使用React头盔而不是next/head。|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|bl7l0|React+Helmet允许您指定元素的属性，如类、样式等。|c0jg8|要设置您的pages/_document.js要在这里使用React+Helment，您需要做的就是。首先在布局组件中的某个位置添加标签：|style|CODE|69eh9|const+title+=+"hello";
const+bodyClass+=+"world";
return+(
++++
++++++
++++++++{+title+}
++++++++
++++++
++++
)|code-block|syntax|javascript|c07vd|现在，配置您的pages/_document.js要从头盔读取属性并将其传递给Next.js，请执行以下操作：|2fasi|import+Document,+{+Html,+Head,+Main,+NextScript+}+from+'next/document';
import+{+Helmet+}+from+'react-helmet';

export+default+class+MyDocument+extends+Document+{
++++static+async+getInitialProps(ctx)+{
++++++++const+initialProps+=+await+Document.getInitialProps(ctx);
++++++++//+see+https://github.com/nfl/react-helmet#server-usage+for+more+information
++++++++//+'head'+is+used+by+'renderPage().head',+we+cannot+use+it
++++++++return+{+...initialProps,+helmet:+Helmet.renderStatic()+};
++++}

++++//+should+render+on+
++++get+helmetHtmlAttrComponents()+{
++++++++return+this.props.helmet.htmlAttributes.toComponent();
++++}

++++//+should+render+on+
++++get+helmetBodyAttrComponents()+{
++++++++return+this.props.helmet.bodyAttributes.toComponent();
++++}

++++//+should+render+on+
++++get+helmetHeadComponents()+{
++++++++return+Object.keys(this.props.helmet)
++++++++++++.filter((el)+=>+el+!==+'htmlAttributes'+&&+el+!==+'bodyAttributes')
++++++++++++.map((el)+=>+this.props.helmet[el].toComponent());
++++}

++++render()+{
++++++++//+if+you+don't+like+Helmet+but+you+still+want+to+set+properties+on+body+use+this
++++++++//+const+pageProps+=+_.get(this.props,+'__NEXT_DATA__.props.pageProps');
++++++++return+(
++++++++++++
++++++++++++++++{this.helmetHeadComponents}
++++++++++++++++
++++++++++++++++++++
++++++++++++++++++++
++++++++++++++++
++++++++++++
++++++++);
++++}
}|c1n0t|注意：如果你不喜欢+Helmet+但你仍然想从传递到你的页面的+props+中设置属性，你可以从this.props.__NEXT_DATA__.props.pageProps但对我来说感觉很糟糕而且不稳定:)|2acjs|++render()+{
++++++++const+pageProps+=+_.get(this.props,+'__NEXT_DATA__.props.pageProps');
++++++++return+(
++++++++++++
++++++++++++++++
++++++++++++++++
++++++++++++++++++++
++++++++++++++++++++
++++++++++++++++
++++++++++++
++++++++);
++++}|js^0|2|7|0|0|0|5|I|0|0|7|I|0|0|1C|14|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|14|G|@]|H|@$I|15|J|16|A|17]]|6|$]]|$A|K|C|L|2|E|F|18|G|@]|H|@]|6|$]]|$A|M|C|N|2|E|F|19|G|@$I|1A|J|1B|O|P]]|H|@]|6|$]]|$A|Q|C|R|2|S|F|1C|G|@]|H|@]|6|$T|U]]|$A|V|C|W|2|E|F|1D|G|@$I|1E|J|1F|O|P]]|H|@]|6|$]]|$A|X|C|Y|2|S|F|1G|G|@]|H|@]|6|$T|U]]|$A|Z|C|10|2|E|F|1H|G|@$I|1I|J|1J|O|P]]|H|@]|6|$]]|$A|11|C|12|2|S|F|1K|G|@]|H|@]|6|$T|13]]]]

<p>Unfortunately, <code>next/head</code> does not allow specifying body class like <a href="https://github.com/nfl/react-helmet" rel="nofollow noreferrer">React Helmet</a> does:</p>
<pre class="lang-html prettyprint-override"><code>&lt;Helmet&gt;
  &lt;body className=&quot;foo&quot;/&gt;
&lt;/Helmet&gt;
</code></pre>
<p>Luckily, you can use <code>this.props.__NEXT_DATA__.props.pageProps</code> inside <code>_document.js</code> to get access to the page props and use them to to set the class on the <code>&lt;body&gt;</code> element:</p>
<pre class="lang-js prettyprint-override"><code>import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx);
        return { ...initialProps };
    }

    render() {
        const pageProps = this.props?.__NEXT_DATA__?.props?.pageProps;
        console.log('pageProps =&gt; ', pageProps);
        return (
            &lt;Html&gt;
                &lt;Head /&gt;
                &lt;body className={pageProps.bodyClassName}&gt;
                    &lt;Main /&gt;
                    &lt;NextScript /&gt;
                &lt;/body&gt;
            &lt;/Html&gt;
        );
    }
}
</code></pre>
<p>More info <a href="http://smnh.me/add-class-to-body-tag-in-nextjs/" rel="nofollow noreferrer">here</a>.</p>


<p>I'm using the example here </p>

<pre><code>https://github.com/zeit/next.js#custom-document
</code></pre>

<p>and I want to change the custom_class on the body tag</p>

<p>I have tried passing props on calling components but nothing works. I want to add a 'dark' class based on some condition but I have no idea how to change this. </p>

<p>EDIT: </p>

<p>I'm not sure this is possible. After getting help from the nextjs slack channel I was told </p>

<pre><code>"Pages get rendered client side with next/link
And body is not touched after server side rendering"
</code></pre>

<p>I'm going to try and wrap things in another tag that I generate and try and change that. </p>


Next.js custom class on body using _document.js

 我在这里使用这个例子 https://github.com/zeit/next.js#custom-document 我想改变习惯_在body标记上使用 我尝试过在调用组件时传递道具，但都不起作用。我想添加一个基于某些条件的“暗”类，但我不知道如何改变这一点。 编辑： 我不确定这是否可能。在从nextjs slack...

问使用_document.js的body上的Next.js自定义类
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用_document.js的body上的Next.js自定义类EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用_document.js的body上的Next.js自定义类
EN