React中如何仅为单个组件页面设置body背景图且不影响Navbar

下面提供3种常用的落地方案，均不会影响公共Navbar的显示，也不会污染其他页面的样式： #

方案1：页面生命周期动态修改body类（最常用） #

在联系我们页面的挂载钩子中给body添加专属类，页面卸载时移除该类，仅在该页面激活时生效：

• Vue3 示例代码：

// 联系我们页面script中
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
  document.body.classList.add('contact-page-bg')
})
onUnmounted(() => {
  document.body.classList.remove('contact-page-bg')
})

• React 示例代码：

// 联系我们页面组件中
import { useEffect } from 'react'
useEffect(() => {
  document.body.classList.add('contact-page-bg')
  return () => document.body.classList.remove('contact-page-bg')
}, [])

全局样式中添加对应配置：

/* 联系页专属背景 */
.contact-page-bg {
  background: url('你的背景图资源路径') no-repeat center center / cover;
  /* 如需背景固定不随滚动可加下行 */
  /* background-attachment: fixed; */
}
/* 单独配置Navbar样式，和body背景完全独立，按需调整即可 */
.navbar {
  background: #ffffff; /* 如需透明可设为transparent */
  position: relative;
  z-index: 100;
}

方案2：页面根容器占满视口设置背景（无需修改body，适配SSR/SSG场景） #

不需要操作body标签，直接给联系我们页面的最外层容器设置满屏背景，适配固定定位的Navbar：

.contact-page-wrapper {
  width: 100%;
  min-height: 100vh;
  /* 此处值替换为你的Navbar实际高度，避免内容被导航栏遮挡 */
  padding-top: 60px;
  box-sizing: border-box;
  background: url('你的背景图资源路径') no-repeat center center / cover;
}

方案3：路由元信息统一管理（适合多页面需要单独设置背景的场景） #

如果后续还有其他页面需要单独配置背景，可在路由层统一处理，不需要每个页面单独写生命周期：

1. 路由配置中添加meta标记（以Vue Router为例）：

{
  path: '/contact',
  component: () => import('./views/Contact.vue'),
  meta: {
    bodyCustomClass: 'contact-page-bg'
  }
}

2. 全局布局组件中监听路由变化，动态修改body类：

import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
watch(() => route.meta.bodyCustomClass, (newClass, oldClass) => {
  if(oldClass) document.body.classList.remove(oldClass)
  if(newClass) document.body.classList.add(newClass)
}, { immediate: true })

通用注意事项 #

如果出现背景图显示不全的问题，先全局添加基础样式重置：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

内容的提问来源于stack exchange，提问作者Azmi Tammam