En utilisant le bouton Material-UI (React) avec CSS, "sélectionner tous les enfants immédiats" ne semble pas fonctionner

Question

HTML donné :

        Default

        Primary

        Secondary

J'ai essayé d'appliquer une marge à tous les éléments enfants immédiats de button-container. Mais cela n'a pas fonctionné.

.button-container > *{
    margin: 8px;
}

Mais cela a fonctionné.

.button-container > Button{
    margin: 8px;
}

S'agit-il d'un problème avec ma syntaxe ou d'une question de compatibilité lors de l'utilisation de JSX/React ?

Answer 1

.button-container > *{
    margin: 8px;
}

Le code ci-dessus sélectionne tous les enfants de la classe button-container. Ainsi, il sélectionnera tous les boutons et appliquera le CSS donné.

.button-container > Button{
    margin: 8px;
}

Le code ci-dessus sélectionne tous les enfants de la classe button-container qui ont pour balise Button.

Dans tous les cas, la sortie devrait appliquer le CSS comme prévu. Dans le premier cas, cela pourrait probablement avoir quelque chose à voir avec la spécificité du sélecteur. Essayez peut-être d'utiliser !important et voyez si cela fonctionne. Consultez le lien codesandbox ci-dessous -

Une autre façon de le faire sans utiliser !important (ce qui devrait être évité autant que possible - lire plus ici ) serait d'être plus spécifique dans votre sélecteur CSS. Par exemple, si vous avez l'élément div racine avec l'ID - #root, vous pourriez mentionner le CSS comme suit -

#root .button-container > * {
  margin: 30px;
}

Dans votre cas, votre CSS est probablement annulé par un autre sélecteur. En étant plus spécifique, vous augmentez la spécificité de votre sélecteur, ce qui augmente sa prééminence sur les autres. Vous pouvez en apprendre davantage sur le fonctionnement de la spécificité CSS ici

Answer 2

Votre sélecteur est trop "générique" donc il est remplacé par un autre sélecteur. Une façon rapide (et peu recommandée) de le corriger est en utilisant !important mais en général, il est préférable de l'éviter.

Consultez ce lien pour des instructions concernant !important comme l'a mentionné Stephen P dans son commentaire.