使用_document.js在body上的nextjs客户类

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (47)

我在这里使用这个例子

https://github.com/zeit/next.js#custom-document

我想更改body标签上的custom_class

我试过在调用组件上传递道具但没有任何作用。我想根据某些条件添加一个“黑暗”类,但我不知道如何更改它。

编辑:

我不确定这是可能的。在得到nextjs slack频道的帮助后,我被告知

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

我将尝试将内容包装在我生成的另一个标记中,并尝试更改它。

提问于
用户回答回答于

这不是你正在寻找的答案,但是我能够通过在组件中传递一个prop来完成同样的功能,然后在一个顶级元素上更新一个类,该元素包含在我的应用程序中的所有内容并位于。这样每个页面都可以拥有自己独特的类,并且操作方式与使用body类相同。

这是我使用主体类的地方

<Layout page_title={meta_title} page_desc={meta_desc} main_class={'contact_page'}>

这是我在Layout组件中使用它的地方:

<main className={props.main_class}>
    <Header page_title={props.page_title} page_desc={props.page_desc} />

      {props.children}

    <Footer />
</main>
用户回答回答于

我找到的最简洁的解决方案不是声明性的,但它运作良好:

import Head from "next/head"

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

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

export default HeadElement

使用此Head组件,您可以将“dark”或“light”(关于亮/暗主题的问题示例)作为bodyClass prop从页面传递。

扫码关注云+社区

领取腾讯云代金券