样式化组件中的后代

Posted 2023-02-22

【中文标题】样式化组件中的后代

【英文标题】：Descendants in styled components

【发布时间】：2022-01-21 03:39:24

【问题描述】：

在样式化的组件中想象我有

let Nav = styled.div`
  height: 50px;


  ul 
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
  
`

如果我这样做有什么区别：

let Nav = styled.div`
  height: 50px;


  /* just added & */
  & ul 
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
  
`

1st和2nd有什么区别？

例如，如果我使用 1st，那么在这种情况下

<Nav/>
<div>1 <ul></ul></div>

样式也适用于ul?但是，如果我使用 2nd 样式将不适用于 ul？

【参考方案1】：

为了将样式应用于“ul”，请使用第二个代码（& ul）。但是在你的 JSX 中，你必须像这样编辑：

<Nav>
    <div>
      1 <ul></ul>
    </div>
</Nav>

因为，当你使用 from ( & ul ) 时，那么 'ul' 必须是 'Nav' 的 child。。 p>

如果这对你有帮助，请告诉我。