React+styled-components：选中项悬停背景无法铺满整宽求助

核心问题分析 #

你的代码里有几个关键问题导致悬停/激活效果无法覆盖整行：

1. Container组件props传递语法错误：= {active} 是无效写法，应该是 active={active}，导致激活状态的背景色没正确应用。
2. Container未设置宽度：桌面端没有指定宽度，默认是内容宽度，所以hover/激活时背景只覆盖内容区域。
3. 多余的重复点击事件：子元素IconBtn、Title都加了onClick，会触发多次状态切换，完全没必要。
4. 样式细节问题：IconBtn的margin-bottom导致容器高度偏移，激活状态背景色用空字符串可能引发样式异常。

修复步骤 #

• 修正Container的props传递，把错误的= {active}改成active={active}。
• 给Container添加width: 100%，让它占满父容器的可用宽度，确保hover/激活效果覆盖整行。
• 只在Container上保留onClick事件，移除IconBtn和Title上的onClick，避免重复触发状态切换。
• 把Container激活状态的背景色空字符串改成transparent，确保默认状态无异常。
• 去掉IconBtn的margin-bottom，避免容器高度偏移，让内容垂直居中对齐。

修改后的完整代码 #

import React, { useState } from 'react'
import styled from "styled-components"

const NavRow = ({ selected, Icon, title }) => {
  const [active, setActive] = useState(false)

  return (
    <>  
      {/* 这里的{active && selected}看起来无实际作用，建议确认用途后再保留 */}
      <Container onClick={() => setActive(!active)} active={active}>
        <IconBtn active={active}>   
          <Icon/>
        </IconBtn>
        <Title active={active}>
          <h4>{title}</h4>
        </Title>
      </Container>
    </>
  )
}

export default NavRow

const Container = styled.div`
  display: flex;
  align-items: center;
  width: 100%; /* 关键：占满父容器宽度 */
  margin-top: -10px;
  box-sizing: border-box;
  padding: 8px 12px; /* 可选：添加内边距提升点击体验 */
  cursor: pointer; /* 统一设置cursor，避免重复写 */

  &:hover {
    background-color: lightgray;
  }

  @media (max-width:768px) {
    width: 30vw;
    height: 5vh;
    margin: 3px;
  }

  background-color: ${(props) => props.active ? "lightgray" : "transparent"};
`

const Title = styled.div`
  font-weight: 600;
  font-size: 11px;
  flex: 1;
  margin-left: 8px;
  white-space: nowrap;

  &:hover {
    font-weight: 700;
    font-size: 12px;
  }

  font-weight: ${(props) => props.active ? "800" : ""};
`

const IconBtn = styled.div`
  color: #606060;
  font-size: large !important;

  &:hover {
    color: red;
  }

  color: ${(props) => props.active ? "red" : "#606060"};
`

额外说明 #

• 如果父容器有固定宽度，Container的width:100%会自动继承父容器宽度，确保效果覆盖整行。
• 添加上下内边距可以让点击区域更友好，避免文字贴边的局促感。

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