Boxpolymorphic

Add inline styles to any element or component with sx
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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>
    </>
  );
}
Set component prop to style different elements
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>
  );
}
Go back
Skeleton – @mantine/core
Up next
Collapse – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter