間距

使用 theme.spacing() 輔助函數，在 UI 元素之間建立一致的間距。

const theme = createTheme();

theme.spacing(2); // `${8 * 2}px` = '16px'

自訂間距

您可以透過提供以下方式來變更間距轉換：

數字

const theme = createTheme({
  spacing: 4,
});

theme.spacing(2); // `${4 * 2}px` = '8px'

函數

const theme = createTheme({
  spacing: (factor) => `${0.25 * factor}rem`, // (Bootstrap strategy)
});

theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px

陣列

const theme = createTheme({
  spacing: [0, 4, 8, 16, 32, 64],
});

theme.spacing(2); // = '8px'

多元arity

theme.spacing() 輔助函數最多接受 4 個參數。您可以使用這些參數來減少樣板程式碼。

-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'

也支援混合字串值

margin: theme.spacing(1, 'auto'), // '8px auto'