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.
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 | 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
:
In c
and bg
props you can reference colors from theme.colors
:
Responsive styles
You can use object syntax to add responsive styles with style props:
Box with responsive style props
Responsive values are calculated the following way:
base
value is used when none of breakpoint values are appliedxs
,sm
,md
,lg
,xl
values are used when the viewport width is larger that the value of corresponding breakpoint specified in theme.breakpoints
In this case the element will have the following styles: