Zugriff auf innere Elemente von externen Komponenten

Question

Ich habe eine externe Select reagieren Komponente, die wiederum li Tags. Ich möchte alle li mit Ausnahme der ersten mit margin-left von 20px stylen;

Unten ist der Code:

const StyledSelect = styled(Select)` 
    li { 
    margin-left: 20px; 
    } 
` 

Jede Idee, warum dies nicht oder eine andere Art und Weise arbeiten, dies zu tun?

Answer 1

Dies sollte funktionieren, aber abhängig davon, wie die externen Select die Stile angewendet haben, könnten sie eine höhere Spezifität haben und überschreiben immer noch die Stile, die Sie angewendet haben. (Siehe this article für eine Grundierung auf, wie Spezifität funktioniert)

Ohne zu wissen, welche Select Komponente Sie verwenden es ein bisschen schwer zu debuggen, aber ich nehme an, es Inline-Styles verwendet (dh die style prop) die eine sehr hohe Spezifität und würde somit Ihre angewandten Stile überschreiben.

Es gibt zwei Möglichkeiten, die Spezifität Ihrer Stile zu ändern, die beide nicht empfohlen werden, wenn die externe Komponente keine Inline-Stile verwendet.

Der erste Weg Spezifität zu stoßen ist !important zu verwenden:

const StyledSelect = styled(Select)` 
    li { 
    margin-left: 20px!important; 
    } 
` 

In einigen Fällen, die, und es ist auch mühsam möglicherweise nicht ausreichen recht, wenn Sie mehr Eigenschaften haben Sie mit Gewalt außer Kraft setzen müssen. Ein besserer Weg, aber noch nicht zu empfehlen Art und Weise ist es die Klasse Hack zu verwenden: (die Et-Zeichen bemerken)

const StyledSelect = styled(Select)` 
    &&& li { 
    margin-left: 20px; 
    } 
` 

Was styled-components tut hier ist jede dieser & mit der generierten Klasse zu ersetzen, die resultierenden CSS Bedeutung wird etwa wie folgt aussehen:

.sc-asdf123.sc-asdf123.sc-asdf123 li { 
    margin-left: 20px; 
} 

Diese drei Klassen stoßen massiv die Spezifität der Stile innerhalb des Blocks. Das sollte den Trick machen!

---

Um das erste Kind nicht stylen Sie die first-child zusammen mit dem not Pseudo-Selektor verwenden können:

const StyledSelect = styled(Select)` 
    &&& li:not(:first-child) { 
    margin-left: 20px; 
    } 
` 

Answer 2

Sie verwenden könnten CSS Pseudo-Klassen:

const StyledSelect = styled(Select)` 
    li:not(:first-child) { 
    margin-left: 20px; 
    } 
` 

Lesen Sie mehr CSS-Pseudoklassen: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes