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

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

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

我在这里使用这个例子

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"

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

提问于
用户回答回答于

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

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从页面传递。

热门问答

关于web表情包集成?

最爱开车啦互联网的敏感者
推荐
表情使用方式有两种方式: 1)是使用 TIMFaceElem 中的 index,标识表情的索引,比如 Android 和 iOS 两端都有同一套表情图,索引2为笑脸,index=2 就表示笑脸,两端发送和接收都显示同一张索引表情图片即可。 2 ) 是使用 TIMFaceElem ...... 展开详请

如何将本地的.json格式的文件部署到服务器上, 通过url请求?

如何调整版本库大小?

marssun_1984

腾讯 · 高级产品经理 (已认证)

腾讯研发管理部产品经理
推荐

使用 CDS-Mask 做数据合作,怎么确保双方都不能反推对方的 ID?

用户2134289

腾讯科技 · 高级工程师 (已认证)

推荐
您好,两种方案可以解决您的需求 1)如果您这边ID不需要在业务上使用,将ID进行加星脱敏即可,加星后的所有数据字符将变为*,无法还原; 2)如果您这边ID在业务上需要使用,也就是ID在处理后必须保持唯一性,那么需要采用腾讯数港算法解决该问题,数港算法目前灰度中,如需要申请,烦请通...... 展开详请

MySQL还要另外购买吗?

蒋小爱

腾讯云 · 技术支持 (已认证)

推荐已采纳
您好,您可在服务器中自建MySQL ,同时腾讯云提供数据库 MySQL(TencentDB for MySQL)让用户可以轻松在云端部署、使用 MySQL 数据库。MySQL 是世界上最流行的开源关系数据库,通过云数据库 MySQL,您在几分钟内即可部署可扩展的 MySQL ...... 展开详请

cos.sliceUploadFile支持断点续传吗?

如果用的是 cos-js-sdk,那么 cos.restartTask 是会断点续传的,用法没有问题。 PS: sdk 使用可以参考 demo.js https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo/demo...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券