Basé sur [l'implémentation] [1] du composant Typography . gutterBottom est défini sur une valeur fixe de «0,35em». Il ne peut pas être changé sur le thème global. Vous devrez envelopper le composant de typographie pour appliquer des marges personnalisées.

Voir le problème Github ici pour les mises à jour! A demandé une fonctionnalité pour cela. https://github.com/mui-org/material-ui/issues/ 13371

Vous pouvez remplacer la valeur de gutterBottom avec le thème remplace :

const baseTheme = createMuiTheme({
  spacing: 8,
});

const theme = createMuiTheme({
  ...baseTheme,
  overrides: {
    MuiTypography: {
      gutterBottom: {
        marginBottom: baseTheme.spacing(2), // 16px
      },
    },
  },
});

Vous pouvez même le baser sur la valeur globale de espacement en séparant votre "base / core "variables dans leur propre thème, et en construisant tout le reste dessus, c'est-à-dire:

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      gutterBottom: {
        marginBottom: 16,
      },
    },
  },
});

La réponse de

designorant est excellente si vous souhaitez ajuster gutterBottom pour toutes les variantes. Cependant, si vous souhaitez ajuster le gutterBottom individuellement pour chaque variante, vous pouvez également utiliser un remplacement global css :

const GlobalCss = withStyles({
    '@global': {
        '.MuiTypography-h1.MuiTypography-gutterBottom': {
            marginBottom: baseTheme.spacing(5)
        },
        '.MuiTypography-h2.MuiTypography-gutterBottom': {
            marginBottom: baseTheme.spacing(3)
        }
    }
})(() => null);

Pour MUI v5 +

Ils ont changé l'API de personnalisation pour qu'elle soit centrée sur les composants afin que les autres solutions ne fonctionnent pas. Journal des modifications GH

const theme = createMuiTheme({
  components: {
    MuiTypography: {
      styleOverrides: {
        gutterBottom: {
          marginBottom: 16,
        },
      },
    },
  },
});