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:
The same logic is applied to style props available in every component:
rem and em function
@asuikit/core
package exports rem
and em
function that can be used to convert px
into rem
/em
:
Convert rem to px
To convert rem
to px
use px
function exported from @asuikit/core
:
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
: