[英]How to target a styled component inside another styled component?
Instead of using div:first-child or div:nth-of-type(2) I would like to say Row or ColSm3 like we usually do in normal CSS, Is it possible to target a styled component inside another styled component?而不是使用 div:first-child 或 div:nth-of-type(2) 我想说 Row 或 ColSm3 就像我们通常在普通 CSS 中所做的那样,是否可以在另一个样式组件中定位样式组件? or is there is another approach instead of using div:first-child or div:nth-of-type(2)??还是有另一种方法而不是使用 div:first-child 或 div:nth-of-type(2)?
Any suggestion?有什么建议吗?
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`
....
`;
You should be able to target a styled component inside a style component like that您应该能够在这样的样式组件中定位样式组件
const Comp1 = styled.div`
display: flex;
`
// Can be imported from another file
// import Comp1 from './Comp1'
const Comp2 = styled.div`
${Comp1} {
background-color: red;
}
`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.