问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我在这里使用示例

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

我想更改 body 标签上的 custom_class

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

编辑：

我不确定这是可能的。从 nextjs 松弛频道获得帮助后，我被告知

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

我将尝试将内容包装在我生成的另一个标签中，然后尝试更改它。

原文由 32423hjh32423 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptreactjsnext.js
阅读 283
1 个回答
得票最新
社区维基
1

我找到的最干净的解决方案不是声明式的，但效果很好：

 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 组件，您可以将“深色”或“浅色”（按照问题的浅色/深色主题示例）作为页面的 bodyClass 道具传递。

原文由 Jacquen 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题