Материал-UI Типография сточной канавы - Увеличение маржи

Question

Я использую Material-UI v4 и элементы Typography, когда для них установлено значение gutterbottom, поэтому все поля выглядят слишком маленькими.

Как правильно добавить глобальные дополнительные элементы в типографику? Я предполагаю в теме - но не уверен, как!

Answer 1

Вы можете переопределить значение gutterBottom с помощью theme overrides:

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

Вы можете даже основать его на глобальном spacing значении, выделив "Переменные base / core "в их собственную тему, и все остальное строим на ней, то есть:

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

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

Answer 2

На основе [реализации] [1] компонента Typography. gutterBottom установлен на фиксированное значение «0,35em». Это не может быть изменено на глобальной теме. Вам придется обернуть типографский компонент, чтобы применить пользовательские поля.

См. Выпуск Github здесь для обновления! Запрошенная особенность для этого. https://github.com/mui-org/material-ui/issues/13371