Style props

style props work on all Mantine components

Mantine's style props are props that work on all Mantine components. They set a single style aspect, and affect the root element, with no granularity for inner-elements:

<Box m={4}></Box>

immediate value or alias

When using a prop, we provide either:

• an immediate value, such as 4px,
• or, for some props, an alias, such as xl, sm or indigo. The theme defines the resolved values. For example, the spacing aliases resolve to the following values by default:

// alias default values in theme:
 spacing: {
    xs: rem(10),
    sm: rem(12),
    md: rem(16), // i.e. 16px
    lg: rem(20),
    xl: rem(32),
  },

Note: using an alias instead of an immediate value can make code less straightforward because the resolved value is not immediately clear.

responsiveness: provide alternative values

We can provide alternative values instead of a single one. This fits responsive designs, where mobile and desktop have different values:

<Flex
 direction=	{{ base: 'column',sm: 'row' }}
 gap=		{{ base: 'sm', 	sm: 'lg' }}
 justify=	{{ base: 'sm', 	sm: 'lg' }}
>

• base provides the default, mobile-centric value. Its exact scope depends on other breakpoints, but it always devices with screen under 576p width. For reference, all iPhones are under 450p width.
  • The xs breakpoint activates at 576p. It targets phablets and bigger devices.
  • The sm breakpoints activates at 768p (48em). It targets tablets and wider screens. For reference, iPads start at 768px.

list of style props

The resolved alias information only matters when we use aliases, such as sm or indigo.

margin

padding

typography

size

position

other props