Интервал
Use the theme.spacing() helper to create consistent spacing between the elements of your UI.
Material-UI uses a recommended 8px scaling factor by default.
const theme = createMuiTheme();
theme.spacing(2); // `${8 * 2}px` = '16px'
Custom spacing
Вы можете изменить преобразование расстояния, передав:
- число
const theme = createMuiTheme({
spacing: 4,
});
theme.spacing(2); // `${4 * 2}px` = '8px'
- функция
const theme = createMuiTheme({
spacing: factor => `${0.25 * factor}rem`, // (Bootstrap strategy)
});
theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px
- массив
const theme = createMuiTheme({
spacing: [0, 4, 8, 16, 32, 64],
});
theme.spacing(2); // = '8px'
Multiple arity
Вспомогательная функция theme.spacing ()
принимает до 4 аргументов. Вы можете использовать аргументы, чтобы уменьшить шаблон.
-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'
Mixing string values is also supported:
margin: theme.spacing(1, 'auto'), // '8px auto'