Material-UI Typeography gutterbottom - 增加边距

Question

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

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

Answer 1

对于 MUI v5+

他们将定制 API 更改为以组件为中心，因此其他解决方案将不起作用。GH 变更日志

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

Answer 2

您可以覆盖gutterBottomwith themeoverrides的值：

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 3

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

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