Styled-Components条件样式渲染异常，移动端汉堡菜单切换无样式变化

问题根因 #

你的样式不生效是两个核心错误导致的：

1. 你在StyledHeader的样式逻辑中使用的props.active，是接收自StyledHeader组件自身的入参，但你没有把定义的active状态变量传给StyledHeader，导致props.active永远是初始的undefined，样式逻辑不会触发更新。
2. 你给<nav>标签硬写了active属性，这个属性和你定义的active状态没有绑定，也不会被父级的StyledHeader识别。

修复方案（两种可选） #

方案1：直接给StyledHeader传递active状态（改动最小） #

修改两处代码即可：

1. 给StyledHeader标签绑定active状态，同时删除nav标签上硬写的active属性
2. 可以顺带修正下显示逻辑：当前你写的props.active ? "none" : "block"是active为true时隐藏菜单，和常规交互逻辑相反，可根据需求调整

const Header = () => {
  const [active, setActive] = useState(false);

  return (
    {/* 把active状态传给StyledHeader */}
    <StyledHeader active={active}>
      <img src={logo} alt="sunnyside logo" />
      <button onClick={() => setActive(!active)}>
        <span></span>
        <span></span>
        <span></span>
      </button>
      {/* 删掉这里硬写的active属性 */}
      <nav className="mobile-menu">
        <ul>
          <li>About</li>
          <li>Services</li>
          <li>Projects</li>
          <li>Contact</li>
        </ul>
      </nav>
    </StyledHeader>
  );
};

方案2：把移动端菜单封装为独立styled组件（更符合组件化规范） #

如果不想把状态挂载到Header根节点，可以单独封装菜单组件：

// 新增独立的菜单样式组件
const StyledMobileMenu = styled.nav`
  position: absolute;
  right: 100px;
  top: 100px;
  display: ${(props) => (props.active ? "block" : "none")};
  height: 330px;
  width: 330px;
  background: #e210e2;
  color: white;
  ul {
    // 原有样式
  }
`

// 调用时直接给菜单传active状态即可
const Header = () => {
  const [active, setActive] = useState(false);
  return (
    <StyledHeader>
      {/* 其余代码不变 */}
      <StyledMobileMenu active={active}>
        <ul>
          <li>About</li>
          <li>Services</li>
          <li>Projects</li>
          <li>Contact</li>
        </ul>
      </StyledMobileMenu>
    </StyledHeader>
  )
}

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