Material-UI Typeography gutterbottom - 增加边距

Question

我正在运行 Material-UI v4 和 Typography当元素具有 gutterbottom 时将所有外观设置为边距太小。

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

Answer 1

您可以覆盖 gutterBottom 的值与 theme overrides :

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
      },
    },
  },
});