Vor und Nach pseudo-Klassen verwendet, mit Stil-Komponenten

Was ist die richtige Art sich zu bewerben :before und :after pseudo-Klassen gestalteten Komponenten?

Ich weiß, dass Sie verwenden können,

&:hover {}

gelten die :hover pseudo-Klasse zu einer Stil-Komponente.

Macht diese Arbeit für Alle pseudo-Elemente, wie vor und nach?

Habe ich versucht, mit der &:before und &:after Strategie mit einige ziemlich komplexe Beispiele und ich bin mir nicht sicher, ob meine versuche nicht funktioniert, weil ich was falsch gemacht hab mit meinem Beispiel oder es funktioniert einfach nicht so.

Kann jemand, der einen Einblick auf das? Danke.

InformationsquelleAutor archae0pteryx | 2017-08-24

  1. 39

    Pseudo-Selektoren in styled-components funktionieren genauso wie in CSS. (oder eher, Sass), Was nicht funktioniert, ist wahrscheinlich ein problem in Ihrem spezifischen code, aber das ist schwer zu Debuggen, ohne dass der eigentliche code!

    Hier ist ein Beispiel, wie mit einem einfachen :after:

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

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

    Wenn Sie nach Ihrem code, den ich wahrscheinlich in der Lage sein zu helfen, debug-Ihr Problem!

    Das ist nicht notwendig. Danke für die Klärung! Ich brauchte nur zu wissen, für sicher, dass es so etwas auf mein Ende... =) ich war mir nicht sicher, dass &:before und &:after tätig war. Ich konnte nicht finden eine definitive Antwort über google... also... Danke!
    Keine Sorge, glücklich zu helfen!
    Hi, mxstbr! Ich habe ein problem mit rendering-Pseudo-vor-Inhalt dynamisch. was mache ich falsch? oder ist es etwas Stil-Komponenten nicht unterstützt. stackoverflow.com/questions/46339034/...
    Können wir auch nach und vor jeder bestimmten Kind (sprich :first-child)?

    InformationsquelleAutor mxstbr

  2. 0

    Dies wird drucken Sie das Dreieck in der Mitte des 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;
  }
`;

    InformationsquelleAutor Nalan Madheswaran

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

    InformationsquelleAutor user11362591

Schreibe einen Kommentar