与样式组件一起使用的伪类之前和之后

Question

将样式:before和:after伪类应用于样式化组件的正确方法是什么？

我知道你可以使用

&:hover {}

将:hover伪类应用于样式化组件.

这是否适用于之前和之后的所有伪元素？

我已经尝试使用&:before和&:after策略一些相当复杂的例子,我不确定我的尝试是否工作,因为我的例子有问题,或者它不能像那样工作.

有人对此有一些了解吗？谢谢.

Answer 1

工作中的伪选择器styled-components就像在CSS中一样.(或者更确切地说,Sass)无论什么不工作都可能是你的特定代码中的一个问题,但是如果没有看到实际的代码就很难调试!

以下是如何使用简单的示例:after:

const UnicornAfter = styled.div`
  &:after {
    content: " ";
  }
`;

<UnicornAfter>I am a</UnicornAfter> // renders: "I am a "

如果您发布代码,我可能会帮助调试您的具体问题!

Answer 2

这将在 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;
  }
`;

Answer 3

添加到 @mxstbr 答案

注意，当你想基于 props 进行渲染时，不要忘记用双引号（或单引号）括起来，例如：

const Button = styled.button`
&:before {
content:"${(props)=>props.theme==='dark'?'dark theme':'white theme'}";
}

因为

const Button = styled.button`
&:before {
content:"${(props)=>props.theme==='dark'?'dark theme':'white theme'}";
}

不管用