styled-components嵌套元素条件样式不生效该如何解决？

核心原因 #

你在Container的样式规则中获取的props是Container组件自身的props，而非子元素h2的props。你将beGreen属性传递给了普通h2标签，但Container组件本身没有接收这个属性，所以样式判断里的props.beGreen永远为undefined，始终返回黑色。

两种可行解决方案 #

方案1：将beGreen属性挂载到Container上 #

原有样式逻辑无需修改，只需要给Container传递beGreen属性即可：

const Container = styled.section`
  display: flex;
  alignItems: center;
  & > h2 {
    color: ${props=> props.beGreen ? "green" : 'black'};
  }
`

function B({className}) {
  const isShow = useSelector(selectIsShow)
  const dispatch = useDispatch()
  const handleLogOut = () => {
    dispatch(setIsShow(false))
  }

  return (
    {/* 给Container传beGreen */}
    <Container className={className} beGreen={isShow}>
      {isShow && <h2 className={`${className}-title`}>Hi Huang, welcome!</h2>}
      <SignoutBtn onClick={handleLogOut}>Logout</SignoutBtn>
    </Container>
  )
}

方案2：单独封装h2为styled组件 #

如果该条件样式只作用于h2，不想和Container耦合，可以单独定义带条件样式的h2组件：

// 新增单独的h2样式组件
const Title = styled.h2`
  color: ${props=> props.beGreen ? "green" : 'black'};
`

const Container = styled.section`
  display: flex;
  alignItems: center;
`

function B({className}) {
  const isShow = useSelector(selectIsShow)
  const dispatch = useDispatch()
  const handleLogOut = () => {
    dispatch(setIsShow(false))
  }

  return (
    <Container className={className}>
      {/* 给单独封装的Title传beGreen */}
      {isShow && <Title className={`${className}-title`} beGreen={isShow}>Hi Huang, welcome!</Title>}
      <SignoutBtn onClick={handleLogOut}>Logout</SignoutBtn>
    </Container>
  )
}

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