До и после псевдо классов, используемых со стилизованными компонентами

Каким образом можно применять псевдо-классы :before и :after к стилизованным компонентам?

Я знаю, что вы можете использовать

&:hover {}

применить псевдо-класс :hover к стилизованному компоненту.

Это работает для всех псевдоэлементов, таких как до и после?

Я попытался использовать стратегии &:before и &:after с некоторыми довольно сложными примерами, и я не уверен, что мои попытки не работают, потому что у меня что-то не так с моим примером или просто не работает как это.

Есть ли у кого-то представление об этом? Спасибо.

Ответы

Ответ 1

Псевдоселекторами в styled-components работают так же, как в CSS. (вернее, Sass). Что бы не работало, вероятно, проблема в вашем конкретном коде, но это трудно отлаживать, не видя фактического кода!

Вот пример использования простого :after:

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

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

Если вы разместите свой код, я, скорее всего, смогу помочь отладить вашу конкретную проблему!

Ответ 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;
  }
';

Ответ 3

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