使用styled-components时的Before和After伪类。

Question

如何正确地将 :before 和 :after 伪类应用于样式化组件？

我知道你可以使用

&:hover {}

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

对于所有伪元素（例如 before 和 after），这种方法是否都适用？

我尝试过在一些比较复杂的示例中使用 &:before 和 &:after 策略，但我不确定我的尝试是否失败是因为我在示例中搞错了什么，还是它就不是这样工作的。

是否有人对此有所了解？谢谢。

- rimraf

---

这是你的问题吗？https://dev59.com/_lYO5IYBdhLWcg3wHd9o#46373741 - shlgug

这么长时间过去了，我已经记不清了！ - rimraf

Answer 1

< p >在styled-components中，伪选择器的工作方式与CSS中的工作方式相同（或者更准确地说是Sass）。如果某些东西不起作用，可能是您特定代码中的问题，但是如果没有看到实际代码，很难进行调试！< /p > < p >下面是使用简单的:after的示例： < /p >

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

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

如果您发布您的代码，我很可能能够帮助调试您特定的问题！

- mxstbr

---

不必了，谢谢你的澄清！我只是需要确定这是我的问题... =）我不确定&:before和&:after是否有效。我在谷歌上找不到明确的答案...所以...谢谢！ - rimraf

没问题，很乐意帮忙！ - mxstbr

@mxstbr 你好，mxstbr！我在动态渲染“伪元素before”的内容时遇到了问题。我做错了什么吗？或者这是styled-components不支持的功能。 - user5809117

我们能否将 after 和 before 应用于任何特定的子元素（例如：first-child）？ - Sanjay Joshi

如果您使用对象语法而不是模板字符串，并且想要一个空的 :before 元素，则必须在引号中包含引号，例如 content: '""'。 - joshkarges

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;
  }
`;

- Nalan Madheswaran

Answer 3

继承 @mxstbr 的答案：

请注意，如果您想根据 props 渲染内容，请不要忘记用双引号（或单引号）将其包装起来，例如：

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

因为

content:${(props)=>props.theme==='dark'?'dark theme':'white theme'};

无法正常工作

- Ghazi

Answer 4

这是一个好的、简单明了的回答：

https://dev59.com/XVcO5IYBdhLWcg3wZQzX#45871869，作者为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;
  }
`;

- Adam Kochanski

---

我无法在 @emotion/babel-plugin 11.3.0 中让这个工作 https://github.com/emotion-js/emotion/issues/2354 - Daniel Lizik

Answer 5

作为一个对象（注意双引号）：

const Div = styled.div({
  '&:before': {
    content: '"a string"',
  },
})

- Fellow Stranger

Answer 6

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);

- user11362591

---

问题是关于styled-components的，但是你使用了普通的JavaScript进行回答。此外，你的解决方案根本不是一个好的实践（使用jQuery，追加到DOM等）。另外，请考虑改善你答案的格式：你把所有内容都放在了一个代码块中。 - Julien Sanchez

如果你实际上是使用原生JS操作DOM，那么使用React就没有意义了。 - Ghazi