样式化组件多个伪元素

Question

对不起，我从来没有在这里发过，所以不确定这个问题是否正确提出。

我一直在试图弄清楚如何做这样的样式，但无法弄清楚它如何与样式组件一起工作。

有人可以把我推向正确的方向吗？

我怎样才能用 ReactJS 和 Styled-components 做这样的事情？

figure.container .square:before,
figure.container .square:after,
figure.container .square div:before,
figure.container .square div:after {
/* styling */
}
figure.container .square:before,
figure.container .square:after {
/* styling */
}
figure.container .square div:before,
figure.container .square div:after {
/* styling */
}
figure.container .square:before,
figure.container .square div:before {
/* styling */
}
figure.container .square:after,
figure.container .square div:after {
/* styling */
}

这是我的jsx结构：

<Figure>
<Square>
<div></div>
</Square>
</Figure>

Answer 1

考虑到您可以在 css 选择器中省略.container，这应该可以正常工作

const Square = styled.div`
:before, 
:after,
div:before, 
div:after {
background-color: white;
position: absolute;
content: "";
display: block;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
:before,
:after {
width: 65%;
height: 2px;
background-color: white;
}
div:before,
div:after {
width: 2px;
height: 65%;
}
:before,
div:before {
left: 0;
top: 0;
}
:after,
div:after {
bottom: 0;
right: 0;
}
`;

但以防万一，如果您想要一对一的转换

const Figure = styled.div`
${Square}:before, 
${Square}:after,
${Square} div:before, 
${Square} div:after {
background-color: white;
position: absolute;
content: "";
display: block;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
${Square}:before,
${Square}:after {
width: 65%;
height: 2px;
background-color: white;
}
${Square} div:before,
${Square} div:after {
width: 2px;
height: 65%;
}
${Square}:before,
${Square} div:before {
left: 0;
top: 0;
}
${Square}:after,
${Square} div:after {
bottom: 0;
right: 0;
}
`;