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:

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`
`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`	`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;
  }
}

Go back

Responsive styles – Styles

Up next

Styles API – Styles

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter