React中使用StyledComponents根据导航栏是否在DOM中切换页面背景色

Styled Components 本身没有内置检测指定DOM节点是否存在的能力，你需要结合React逻辑实现，这里提供两种常用的可行方案：

方案1：状态驱动（推荐） #

这是最符合React声明式开发逻辑的方案，不需要操作DOM，性能和可维护性最好。

• 第一步：给StyledMain新增props接收导航栏显示状态，动态控制背景色

const StyledMain = styled(Main)`
  display: flex;
  flex-direction: column;
  /* 新增props判断逻辑 */
  background-color: ${props => props.hasNavbar ? '#fff' : 'grey'};
  min-height: 100vh;

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-text-fill-color: ${themeProp("BODY_COLOR")};
    transition: background-color 5000s ease-in-out 0s;
  }
`;

• 第二步：在公共父组件（通常是根组件/App组件）中维护导航栏的显示状态，同步传给StyledMain

import { useState } from 'react';

function App() {
  // 该状态可以根据路由、业务逻辑动态修改
  const [showNavbar, setShowNavbar] = useState(true);

  return (
    <>
      {showNavbar && <Navbar />}
      {/* 把状态传递给StyledMain */}
      <StyledMain hasNavbar={showNavbar}>
        {/* 页面主体内容 */}
      </StyledMain>
    </>
  )
}

方案2：DOM监听（兜底方案） #

如果你无法拿到导航栏的显示状态（比如导航栏是第三方封装组件、现有逻辑耦合过重无法抽离状态），可以用MutationObserver监听DOM变化，判断导航栏是否存在后再更新样式。

• 首先给你的导航栏组件加上唯一标识，比如固定类名.navbar或者自定义属性data-navbar="true"
• 然后在Main组件中添加监听逻辑：

import { useState, useEffect } from 'react';

function Main(props) {
  const [hasNavbar, setHasNavbar] = useState(false);

  useEffect(() => {
    // 检测导航栏是否存在的方法
    const checkNavbar = () => {
      // 替换成你导航栏的唯一标识选择器
      const exist = !!document.querySelector('.navbar');
      setHasNavbar(exist);
    };

    // 初始化检测一次
    checkNavbar();

    // 监听DOM变化
    const observer = new MutationObserver(checkNavbar);
    observer.observe(document.body, { childList: true, subtree: true });

    // 组件卸载时销毁监听
    return () => observer.disconnect();
  }, []);

  return <StyledMain hasNavbar={hasNavbar} {...props} />
}

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