web-dev-qa-db-fra.com

Ne peut pas éliminer le fond-bas du contenu de la carte dans UI de matériau

Lorsque vous utilisez le composant de la carte à partir de l'interface utilisateur du matériau, il semble que le CardContent ait un bas du bas de 24 px que je ne peux pas remplacer par le code suivant. Je peux définir le paddingleft, à droite et en haut en utilisant cette méthode, mais pour une raison quelconque, le paddingbottom ne fonctionnera pas.

const styles = theme => ({
  cardcontent: {
    paddingLeft: 0,
    paddingRight:0,
    paddingTop:0,
    paddingBottom: 0,
  },
})

Puis appliquer ce style:

<CardContent className={classes.cardcontent}></CardContent>

c'est ce que je vois lors de la prévisualisation des éléments du navigateur:

.MuiCardContent-root-158:last-child {
    padding-bottom: 24px;
}
.Component-cardcontent-153 {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

Je peux éditer les pixels dans le navigateur à 0. Mais je ne peux pas comprendre comment cibler MuicardContent-Root-158: dernier enfant et remplacer Paddingbottom dans mon éditeur.

javascriptcssreactjsmaterial-uijss
11
Alexander

ajouter! important, il remplacera la racine CSS

0
frank edekobi

Lors du réglage du remplissage du contenu de la carte sur 0 via une substitution de thème, le suivant fonctionne bien:

overrides: {
  MuiCardContent: {
    root: {
      padding: 0,
      "&:last-child": {
        paddingBottom: 0,
     },
    },
  },
},
0
jhthompson