将:before
和:after
伪类应用于样式化组件的正确方法是什么?
我知道你可以使用
&:hover {}
将:hover
伪类应用于样式组件。
这是否适用于之前和之后的所有伪元素?
我尝试过使用&:before
和&:after
策略以及一些相当复杂的例子,我不确定我的尝试是否有效,因为我的例子出了问题,或者说这样做不合适。
有人对此有一些了解吗?谢谢。
styled-components
中的伪选择器就像在CSS中一样工作。 (或者更确切地说,Sass)无论什么不工作都可能是您的特定代码中的问题,但是如果没有看到实际的代码就很难调试!
以下是如何使用简单的:after
的示例:
const UnicornAfter = styled.div`
&:after {
content: " 🦄";
}
`;
<UnicornAfter>I am a</UnicornAfter> // renders: "I am a 🦄"
如果您发布代码,我可能会帮助调试您的具体问题!
这将在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;
}
`;
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);