Style props

With style props you can add responsive styles to any Mantine component. Style props add styles to the root element, if you want to style nested elements use Styles API instead.

import { Box } from '@mantine/core';
function Demo() {
return (
<Box mx="auto" maw={400} c="blue.6" bg="#fff">
Your component
</Box>
);
}

Supported props

All Mantine components support the following props:

PropCSS PropertyTheme 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
bg
background
theme.colors
c
color
theme.colors
opacity
opacity
ff
fontFamily
fz
fontSize
theme.fontSize
fw
fontWeight
lts
letterSpacing
ta
textAlign
lh
lineHeight
fs
fontStyle
tt
textTransform
td
textDecoration
w
width
miw
minWidth
maw
maxWidth
h
height
mih
minHeight
mah
maxHeight
bgsz
background-size
bgp
background-position
bgr
background-repeat
bga
background-attachment
pos
position
top
top
left
left
bottom
bottom
right
right
inset
inset
display
display

Theme values

Some style props can reference values from theme, for example mt will use theme.spacing value if you set xs, sm, md, lg, xl:

import { Box } from '@mantine/core';
// margin-top: theme.spacing.xs
<Box mt="xs" />
// margin-top: theme.spacing.md * -1
<Box mt="-md" />
// margin-top: auto
<Box mt="auto" />
// margin-top: 10px
<Box mt={10} />
// margin-top: 5rem
<Box mt="5rem" />

In c and bg props you can reference colors from theme.colors:

import { Box } from '@mantine/core';
// color: theme.colors.blue[theme.fn.primaryShade()]
<Box c="blue" />
// background: theme.colors.orange[1]
<Box bg="orange.1" />
// color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
<Box c="dimmed" />
// background: #EDFEFF
<Box bg="#EDFEFF" />
// background: rgba(0, 34, 45, 0.6)
<Box bg="rgba(0, 34, 45, 0.6)" />

Responsive styles

You can use object syntax to add responsive styles with style props:

Box with responsive style props
import { Box } from '@mantine/core';
function Demo() {
return (
<Box
w={{ base: 200, sm: 400, lg: 500 }}
py={{ base: 'xs', sm: 'md', lg: 'xl' }}
bg="blue.7"
c="#fff"
ta="center"
mx="auto"
>
Box with responsive style props
</Box>
);
}

Responsive values are calculated the following way:

  • base value is used when none of breakpoint values are applied
  • xs, sm, md, lg, xl values are used when the viewport width is larger that the value of corresponding breakpoint specified in theme.breakpoints
import { Box } from '@mantine/core';
<Box w={{ base: 200, sm: 400, lg: 500 }}} />

In this case the element will have the following styles:

/* Base styles added to element and then get overwritten with responsive values */
.element {
width: 200px;
}
/* 768px is theme.breakpoints.sm by default */
@media (min-width: 768px) {
.element {
width: 400px;
}
}
/* 1200px is theme.breakpoints.lg by default */
@media (min-width: 1200px) {
.element {
width: 500px;
}
}

You can also use any other px breakpoints as key of style prop:

import { Box } from '@mantine/core';
<Box w={{ base: 200, 700: 300 }} />;
.element {
width: 200px;
}
@media (min-width: 700px) {
.element {
width: 400px;
}
}