将:before 和:after 伪类应用于样式化组件的正确方法是什么？
我知道你可以使用
&:hover {}
将:hover 伪类应用于样式组件。
这是否适用于之前和之后的所有伪元素？
我已经尝试将&:before 和&:after 策略与一些相当复杂的示例一起使用，但我不确定我的尝试是否不起作用，因为我的示例有问题或者它只是不起作用像那样。
有人对此有一些见解吗？谢谢。
【问题讨论】：
标签： reactjs pseudo-class styled-components
styled-components 中的伪选择器就像在 CSS 中一样工作。 （或者更确切地说，Sass）任何不工作的东西都可能是您特定代码中的问题，但是如果没有看到实际代码就很难调试！
下面是一个简单的:after使用示例：
const UnicornAfter = styled.div`
&:after {
content: " ?";
}
`;
<UnicornAfter>I am a</UnicornAfter> // renders: "I am a ?"
如果您发布代码，我可能会帮助调试您的具体问题！
【讨论】：
&:before 和&:after 是否正常工作。我无法通过谷歌找到明确的答案......所以......谢谢！
这将打印 div 中间的三角形。
const LoginBackground = styled.div`
& {
width: 30%;
height: 75%;
padding: 0.5em;
background-color: #f8d05d;
margin: 0 auto;
position: relative;
}
&:after {
border-right: solid 20px transparent;
border-left: solid 20px transparent;
border-top: solid 20px #f8d05d;
transform: translateX(-50%);
position: absolute;
z-index: -1;
content: "";
top: 100%;
left: 50%;
height: 0;
width: 0;
}
`;
【讨论】：
这是一个简单的好答案：
https://stackoverflow.com/a/45871869/4499788 来自 mxstbr
但对于需要更复杂逻辑的元素，我更喜欢这种方法：
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;
}
`;
【讨论】：
作为一个对象（注意双引号）：
const Div = styled.div({
'&:before': {
content: '"a string"',
},
})
【讨论】：
Can try like this.
It works perfectly fine
var setValue="abc";
var elementstyle = '<style>YourClass:before { right:' + abc + 'px;}</style>'
$(".YourClass").append(setValue);
var rightMarginForNotificationPanelConnectorStyle = '<style>.authenticated-page.dx-authenticated .dx-notification .dx-notification-dialog.dx-content-frame:before { right:' + rightMarginForNotificationPanelConnectorWithBadge + 'px;}</style>'
$(".authenticated-page.dx-authenticated .dx-notification .dx-notification-dialog.dx-content-frame").append(rightMarginForNotificationPanelConnectorStyle);
【讨论】：