v6.0.35

rem, em and px units

rem and em units

All Mantine components use rem units to apply size styles. 1rem is considered to be 16px with medium text size selected by user, all components will scale based on settings specified in browser. em units are used for theme.breakpoints and responsive styles.

px conversions

You can use numbers in Mantine components props, it will be treated as px and converted to rem, for example:

import { ColorSwatch } from '@asuikit/core';
function DemoPx() {
// Specify ColorSwatch size in px, it will be automatically converted to rem
// Width and height of ColorSwatch in this case will be 32px / 16 = 2rem
return <ColorSwatch color="#000" size={32} />;
}
function DemoRem() {
// This demo will have the same size as previous one
return <ColorSwatch color="#000" size="2rem" />;
}

The same logic is applied to style props available in every component:

import { Box } from '@asuikit/core';
function Demo() {
// width: 2rem, height: 1rem
// margin-left: 1rem
// @media (min-width: theme.breakpoints.sm) -> margin-left: 2rem
return <Box w={32} h={16} ml={{ base: 16, sm: 32 }} />;
}

rem and em function

@asuikit/core package exports rem and em function that can be used to convert px into rem/em:

import { rem, em } from '@asuikit/core';
// numbers and values in px are converted to rem
rem(32); // -> 2rem
em(32); // -> 2em
rem('16px'); // -> 1rem
em('16px'); // -> 1em
// other values are returned as is
rem('2rem'); // -> 2rem
em('2rem'); // -> 2rem
rem('50%'); // -> 50%
em('50%'); // -> 50%
rem('5vh'); // -> 5vh
em('5vh'); // -> 5vh

Convert rem to px

To convert rem to px use px function exported from @asuikit/core:

import { px } from '@asuikit/core';
px('2rem'); // -> 32
px('10rem'); // -> 160

rem in emotion styles

createStyles, sx prop and styles do not perform automatic rem units conversion. When you write styles it is recommended to either specify all size values in rem or use rem function to convert px to rem:

import { createStyles, rem } from '@asuikit/core';
createStyles({
button: {
// specify sizes in rem
width: '1rem',
// or use rem function to convert px
border: `${rem(2)} solid gray`,
},
});