AliIybar: Created page with "Category:Material == Spacing == === Notation === The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named..."

2024-12-24T12:42:08Z

Created page with "Category:Material == Spacing == === Notation === The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named..."

New page

[[Category:Material]]

== Spacing ==
=== Notation ===
The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named using the format '''{property}{sides}'''.

Where property is one of:
* m - for classes that set margin
* p - for classes that set padding
Where sides is one of:
* t - for classes that set margin-top or padding-top
* b - for classes that set margin-bottom or padding-bottom
* l - for classes that set margin-left or padding-left
* r - for classes that set margin-right or padding-right
* x - for classes that set both *-left and *-right
* y - for classes that set both *-top and *-bottom
* blank - for classes that set a margin or padding on all 4 sides of the element

=== Transformation ===

Depending on the input and the theme configuration, the following transformation is applied:

input: number & theme: number: the prop value is multiplied by the theme value.
<pre>
const theme = {
spacing: 8,
}

<Box sx={{ m: -2 }} /> // margin: -16px;
<Box sx={{ m: 0 }} /> // margin: 0px;
<Box sx={{ m: 0.5 }} /> // margin: 4px;
<Box sx={{ m: 2 }} /> // margin: 16px;
</pre>

input: number & theme: array: the prop value is used as the array index.
<pre>
const theme = {
spacing: [0, 2, 3, 5, 8],
}

<Box sx={{ m: -2 }} /> // margin: -3px;
<Box sx={{ m: 0 }} /> // margin: 0px;
<Box sx={{ m: 2 }} /> // margin: 3px;
</pre>

input: number & theme: function: the function is called with the prop value.
<pre>
const theme = {
spacing: value => value * 2,
}

<Box sx={{ m: 0 }} /> // margin: 0px;
<Box sx={{ m: 2 }} /> // margin: 4px;
</pre>
input: string: the prop value is passed as raw CSS value.
<pre>
<Box sx={{ m: '2rem' }} /> // margin: 2rem;
<Box sx={{ mx: 'auto' }} /> // margin-left: auto; margin-right: auto;
</pre>

Material UI Basics - Revision history

AliIybar: Created page with "Category:Material == Spacing == === Notation === The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named..."