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

Custom component

To use Box with custom component or element set component prop to tag name or react component:

import { ActionIcon } from '@mantine/core';
import { Link } from 'react-router-dom';
function Demo() {
return (
<>
<ActionIcon<'a'> component="a" href="#" />
<ActionIcon<typeof Link> component={Link} to="/hello" />
</>
);
}
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>
);
}