如何在另一个样式组件中定位样式组件？

Posted 2023-03-16

【中文标题】如何在另一个样式组件中定位样式组件？

【英文标题】：How to target a styled component inside another styled component?

【发布时间】：2021-04-08 10:02:24

【问题描述】：

我不想使用 div:first-child 或 div:nth-of-type(2) 我想说的是 Row 或 ColSm3 就像我们通常在普通 CSS 中所做的那样， 是否可以在另一个样式组件中定位样式组件？ 还是有另一种方法而不是使用 div:first-child 或 div:nth-of-type(2)？

有什么建议吗？

Normal CSS
.ftrlinkbxs .rowmargin: 0 -5px; justify-content: flex-start;
.ftrlinkbxs .col-sm-3padding: 0 5px; max-width: 33.33%; flex: 0 0 33.33%; 

html
        <div class="ftrlinkbxs">
            <div class="row">
                <div class="col-sm-3">
                    <strong>Title...</strong>
                    <ul>
                        <li><a href="#url">.....</a></li>
                    </ul>
                 </div>
             </div>
         </div>

Styled Components
export const Ftrlinkbxs = styled.div`
  width: 100%;
  @media (min-width: 768px)
    div:first-child 
      margin: 0 1px;
    
    div:nth-of-type(2) 
      padding: 0 5px;
    
  
`;

export const Row = styled.div`
 ....
`;

export const ColSm3 = styled.div`
 ....
`;

【参考方案1】：

您应该能够在这样的样式组件中定位样式组件

const Comp1 = styled.div`
   display: flex;
`

// Can be imported from another file
// import Comp1 from './Comp1'
const Comp2 = styled.div`
   $Comp1 
      background-color: red;
   
`