材质用户界面排版底部-增加边距

Question

我正在运行Material-UI v4和Typography元素（当它们设置为gutterbottom时，看起来都没有太多余量。

对我的Typography元素全局添加更多marginbottom的正确方法是什么？我以主题为准-但不确定如何！

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

Answer 2

如果要为所有变体调整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);

Answer 3

对于MUI v5 +

他们将定制API更改为以组件为中心，因此其他解决方案将无法使用。

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

Answer 4

基于Typography组件的[implementation] [1]。 gutterBottom设置为固定值'0.35em'。不能更改全局主题。您必须包装版式组件才能应用自定义边距。

请参阅此处的Github问题以获取更新！要求功能。 https://github.com/mui-org/material-ui/issues/13371