Box

Add inline styles to any element or component with sx
Import

Usage

Box allows you to use sx prop with any element or component. Box itself does not include any styles.

Box lets you add inline styles with sx prop
import { Box } from '@mantine/core';
function Demo() {
return (
<Box
sx={(theme) => ({
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
textAlign: 'center',
padding: theme.spacing.xl,
borderRadius: theme.radius.md,
cursor: 'pointer',
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
},
})}
>
Box lets you add inline styles with sx prop
</Box>
);
}

Polymorphic component

Box is a polymorphic component, you can change root element:

import { Box } from '@mantine/core';
import { Link } from 'react-router-dom';
function Demo() {
return (
<>
<Box component="a" href="#">
Box as anchor
</Box>
<Box component={Link} to="/hello">
Box as react-router-dom link
</Box>
</>
);
}
import { Box } from '@mantine/core';
function Demo() {
return (
<Box
component="a"
href="https://mantine.dev"
target="_blank"
sx={(theme) => ({
display: 'block',
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
color: theme.colorScheme === 'dark' ? theme.colors.blue[4] : theme.colors.blue[7],
textAlign: 'center',
padding: theme.spacing.xl,
borderRadius: theme.radius.md,
cursor: 'pointer',
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
},
})}
>
Set component prop to style different elements
</Box>
);
}