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
theme.spacing
miw
minWidth
theme.spacing
maw
maxWidth
theme.spacing
h
height
theme.spacing
mih
minHeight
theme.spacing
mah
maxHeight
theme.spacing
bgsz
backgroundSize
–
bgp
backgroundPosition
–
bgr
backgroundRepeat
–
bga
backgroundAttachment
–
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: 1rem
<Box mt={16} />


// 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: 320, sm: 480, lg: 640 }} />

In this case the element will have the following styles:

/* Base styles added to element and then get overwritten with responsive values */
.element {
  width: 20rem;
}


/* 48em is theme.breakpoints.sm by default */
@media (min-width: 48em) {
  .element {
    width: 30rem;
  }
}


/* 75em is theme.breakpoints.lg by default */
@media (min-width: 75em) {
  .element {
    width: 40rem;
  }
}
Go back
Responsive styles – Styles
Up next
Styles API – Styles
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter