Universal style props
We control various style aspects, by adding the following props to any Mantine component (instance):
spacing
| Prop | CSS Property | Theme key |
|---|---|---|
| m | margin | theme.spacing |
| mt | marginTop | theme.spacing |
| mb | marginBottom | theme.spacing |
| ml | marginLeft | theme.spacing |
| mr | marginRight | theme.spacing |
| mx | marginRight, marginLeft | theme.spacing |
| my | marginTop, marginBottom | theme.spacing |
| p | padding | theme.spacing |
| pt | paddingTop | theme.spacing |
| pb | paddingBottom | theme.spacing |
| pl | paddingLeft | theme.spacing |
| pr | paddingRight | theme.spacing |
| px | paddingRight, paddingLeft | theme.spacing |
| py | paddingTop, paddingBottom | theme.spacing |
typography
| Prop | CSS Property | Theme key |
|---|---|---|
| ff | fontFamily | – |
| fz | fontSize | theme.fontSizes |
| fw | fontWeight | – |
| lts | letterSpacing | – |
| ta | textAlign | – |
| lh | lineHeight | theme.lineHeights |
| fs | fontStyle | – |
| tt | textTransform | – |
| td | textDecoration | – |
size
| Prop | CSS Property | Theme key |
|---|---|---|
| w | width | theme.spacing |
| miw | minWidth | theme.spacing |
| maw | maxWidth | theme.spacing |
| h | height | theme.spacing |
| mih | minHeight | theme.spacing |
| mah | maxHeight | theme.spacing |
position
| Prop | CSS Property | Theme key |
|---|---|---|
| pos | position | – |
| top | top | – |
| left | left | – |
| bottom | bottom | – |
| right | right | – |
| inset | inset | – |
other props
| Prop | CSS Property | Theme key |
|---|---|---|
| display | display | |
| flex | flex | |
| bd | border | |
| bdrs | borderRadius | |
| bg | background | theme.colors |
| bgsz | backgroundSize | – |
| bgp | backgroundPosition | – |
| bgr | backgroundRepeat | – |
| bga | backgroundAttachment | – |
| c | color | theme.colors gray.5 blue |
| opacity | opacity | – |
responsiveness: provide alternative values.
Instead of providing a single value, we provide an object with alternative values. Most of the time, we provide two values:
<Flex
direction= {{ base: 'column',sm: 'row' }}
gap= {{ base: 'sm', sm: 'lg' }}
justify= {{ base: 'sm', sm: 'lg' }}
>
- the base value provides the mobile-centric, default value. Its exact scope depends on which other breakpoints we use, but it always includes regular smartphones. For reference, iPhones are under 450p width, with standard-size iPhones under 400p.
- The xs breakpoint activates at 576p. It doesn't apply to regular smartphones but applies to phablets and bigger devices.
- The sm breakpoints activates at 768p (48em). It doesn't apply to phablets, but applies to tablets and wider screens. For reference, iPads start at 768px.