【问题标题】：Material-UI Typeography gutterbottom - Increase marginMaterial-UI Typography gutterbottom - 增加边距
【发布时间】：2019-05-30 04:26:24
【问题描述】：

我正在运行 Material-UI v4 和 Typography 元素，当它们设置了 gutterbottom 时，它们的边距看起来都太小了。

在我的 Typography 元素中全局添加更多 marginbottom 的正确方法是什么？我假设在主题中 - 但不确定如何！

【问题讨论】：

标签： material-ui

【解决方案1】：

您可以用theme overrides 覆盖gutterBottom 的值：

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

您甚至可以通过将“基础/核心”变量分离到它们自己的主题中，并在其上构建其他所有内容，从而将其基于全局 spacing 值，即：

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

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

【讨论】：

【解决方案2】：

对于 MUI v5+

他们将自定义 API 更改为以组件为中心，因此其他解决方案将无法正常工作。 GH changelog

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

【讨论】：

这对于覆盖所有 gutterBottom 是准确的。但是，如果您想在不同的组件上使用不同的 gutterBottom，这将不是很好。如果您只想影响特定组件，您可以执行类似... MuiTypography: {styleOverrides: {h1: {'&.MuiTypography-gutterBottom': {marginBottom: defaultTheme.spacing(6.25),},},},}...
这不适用于我的 MUI v5.0.3 在CodeSandbox上查看我的 MRE

【解决方案3】：

如果您想为所有变体调整gutterBottom，designorant 的答案非常棒。但是，如果您想单独调整每个变体的gutterBottom，您也可以使用global css override：

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

【讨论】：

【解决方案4】：

我使用此解决方案为我的主题中的单个标题覆盖 gutterBottom。

const overrides = {
  overrides: {
    MuiTypography: {
      h3: { 
             "&.MuiTypography-gutterBottom": { 
              marginBottom: "20px" 
          }
      },
    },
  },
}

【讨论】：

【解决方案5】：

基于Typography 组件的[实现][1]。 gutterBottom 设置为固定值“0.35em”。它不能在全局主题上更改。您必须包装排版组件以应用自定义边距。

请在此处查看 Github 问题以获取更新！为它请求了一个功能。 https://github.com/mui-org/material-ui/issues/13371

【讨论】：