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

Question

而不是使用 div:first-child 或 div:nth-of-type(2) 我想说行或 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`
 ....
`;

Answer 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;
   }
`

Answer 2

或者更好的方法是将您想要的组件作为参数传递给 styled

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

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

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

How to target a styled component inside another styled component?

javascript

css

emotion

reactjs

styled-components