Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

Spacing

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.

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

theme<span class="token punctuation">.</span><span class="token function">spacing</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// `${8 * 2}px` = '16px'</span>

Custom spacing

You can change the spacing transformation by providing:

  • a number
<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">spacing</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

theme<span class="token punctuation">.</span><span class="token function">spacing</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// `${4 * 2}px` = '8px'</span>
  • a function
<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function-variable function">spacing</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">factor</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token number">0.25</span> <span class="token operator">*</span> factor<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">rem</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token comment">// (Bootstrap strategy)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

theme<span class="token punctuation">.</span><span class="token function">spacing</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 0.25 * 2rem = 0.5rem = 8px</span>
  • an array
<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">spacing</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">64</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

theme<span class="token punctuation">.</span><span class="token function">spacing</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = '8px'</span>

Multiple arity

The theme.spacing() helper accepts up to 4 arguments. You can use the arguments to reduce the boilerplate.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">padding: theme.spacing(1, 2), // '8px 16px'</span></span>

Mixing string values is also supported:

<span class="token literal-property property">margin</span><span class="token operator">:</span> theme<span class="token punctuation">.</span><span class="token function">spacing</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'auto'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// '8px auto'</span>