Material-UI Typeography gutterbottom - Increase margin

Question

I'm running Material-UI v4 and the Typography elements when they have gutterbottom set all look to have way too little margin.

What is the correct way to global add more marginbottom to my Typography elements? I assume in the theme - but not sure how!

Answer 1

For MUI v5+

They changed the customization API to be component-centric so the other solutions won't work. GH changelog

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

Answer 2

You can override the value of gutterBottom with theme overrides:

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

You can even base it on the global spacing value by separating out your "base/core" variables into their own theme, and building everything else upon it, i.e.:

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

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