J'ai un composant de réaction externe Select qui à son tour affiche li étiquettes. Je veux tous les styles li sauf le premier avec margin-left de 20px;Comment accéder aux éléments internes des composants externes
est Ci-dessous le code:
const StyledSelect = styled(Select)`
li {
margin-left: 20px;
}
`
Toute idée pourquoi cela ne fonctionne pas ou d'une autre façon de le faire?
Cela devrait fonctionner, mais selon la façon dont les styles appliqués sont Select externes, ils peuvent avoir une spécificité plus élevée et remplacent toujours les styles que vous avez appliqués. (Voir this article pour une amorce sur la façon dont la spécificité fonctionne)
Sans savoir quel Select composant que vous utilisez c'est un peu difficile à déboguer, mais je suppose qu'il utilise les styles en ligne (par exemple l'hélice style) qui ont une très haute spécificité et donc remplacer vos styles appliqués.
Il existe deux façons de modifier la spécificité de vos styles, les deux étant non recommandés si le composant externe n'utilise pas les styles en ligne.
La première façon de cogner la spécificité est d'utiliser !important:
const StyledSelect = styled(Select)`
li {
margin-left: 20px!important;
}
`
Dans certains cas qui pourraient ne pas suffire, et il est aussi assez fastidieux une fois que vous avez plus de propriétés dont vous avez besoin pour passer outre la force. Une meilleure façon, mais toujours pas moyen recommandé aussi, il est d'utiliser le hack de classe: (notez les esperluette)
const StyledSelect = styled(Select)`
&&& li {
margin-left: 20px;
}
`
Qu'est-ce que styled-components fait ici est de remplacer chacun de ces & avec la classe générée, ce qui signifie le CSS qui en résulte ressembler à quelque chose comme ceci:
.sc-asdf123.sc-asdf123.sc-asdf123 li {
margin-left: 20px;
}
Ces trois classes bousculent massivement la spécificité des styles dans le bloc. Cela devrait faire l'affaire!
Pour le style pas le premier enfant, vous pouvez utiliser le first-child en même temps que le sélecteur not pseudo:
const StyledSelect = styled(Select)`
&&& li:not(:first-child) {
margin-left: 20px;
}
`
Suggérer un piratage ou l'utilisation de la spécificité n'est pas une bonne direction pour pointer quelqu'un, à mon humble avis. – klaasman
Si le composant externe utilise des styles en ligne, ce que je suppose est le cas sinon les styles seraient remplacés, il n'y a aucun moyen d'appliquer vos styles sans leur donner une spécificité plus élevée que les styles en ligne, et la seule façon de faire c'est malheureusement avec des hacks. Laissez-moi mettre à jour ma réponse pour expliquer pourquoi je pense que cela est nécessaire, une seconde! – mxstbr
J'ai mis à jour la réponse pour refléter mes hypothèses (le composant externe utilise des styles en ligne) et expliquer pourquoi les hacks sont nécessaires mais aussi qu'ils ne devraient pas être utilisés s'ils ne sont pas absolument nécessaires. Est-ce que ma réponse a plus de sens pour vous maintenant? – mxstbr
Vous pouvez utiliser des pseudo-classes CSS:
const StyledSelect = styled(Select)`
li:not(:first-child) {
margin-left: 20px;
}
`
En savoir plus sur CSS pseudo-classes: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes
votre code va tous style li éléments à l'intérieur du composant Select. Si vous voulez exclure le premier li, vous devrez ajouter une règle/sélecteur css. Voir [cette question] (https://stackoverflow.com/questions/10033299/is-there-any-way-to-specify-a-css-shorthand-for-all-elements-except-the-first-l) – devboell
votre question est un peu floue. Le 'marge-left: 20px;' est-il correctement appliqué, et vous demandez-vous comment exclure le premier li? Ou votre style n'est-il pas appliqué du tout? – devboell