styled component - 嵌套条件样式

Posted 2023-03-15

【中文标题】styled component - 嵌套条件样式

【英文标题】：styled component - nested conditional styling

【发布时间】：2021-10-31 13:22:38

【问题描述】：

我一直在尝试，但无法弄清楚如何使用样式化组件有条件地设置嵌套元素的样式。

我希望h2元素可以根据道具beGreen改变颜色，如果我独立设置样式也没关系，但如果我尝试嵌套在容器中并使用道具。不行，即使道具值是真的也总是黑的……

道具在嵌套元素中不起作用吗？

代码

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>
      isShow && <h2 className=`$className-title` beGreen=isShow>Hi Huang, welcome!</h2>
      <SignoutBtn onClick=handleLogOut>Logout</SignoutBtn>
    </Container>
  )

【问题讨论】：

Props 仅适用于初始化 styled-components。将您的 beGreen 放入 Container 中，它就会起作用。

【参考方案1】：

您正在容器中使用“beGreen”条件。但是您将“beGreen”传递给 h2。您应该将“beGreen”传递给您使用它的组件，即容器。

在下面的代码中，我将 beGreen 传递给容器。

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>
  )