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

【问题标题】：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 .row{margin: 0 -5px; justify-content: flex-start;}
.ftrlinkbxs .col-sm-3{padding: 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`
 ....
`;

【问题讨论】：

标签： javascript css reactjs styled-components emotion

【解决方案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;
   }
`

【讨论】：