score:2

you are using the "begreen" condition in the container. but you pass "begreen" to h2. you should pass "begreen" to the component where you use it, that is, to the container.

in the code below, i pass begreen to the container.

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

function b({classname}) {
  const isshow = useselector(selectisshow)
  console.log(isshow)
  const dispatch = usedispatch()
  const handlelogout = () => {
    dispatch(setisshow(false))
  }

  return (
    <container classname={classname} begreen={isshow}>
      {isshow && <h2 classname={`${classname}-title`}>hi huang, welcome!</h2>}
      <signoutbtn onclick={handlelogout}>logout</signoutbtn>
    </container>
  )
}

Related Query

More Query from same tag