sx prop

All Mantine components support sx prop. With sx you can add styles to component root element. If you need to customize styles of other elements within component use Styles API.

sx object

With sx prop, you can add inline styles to any component. Styles added with sx will be parsed by emotion and added to the head or specified target container in emotion cache.

import { Text } from '@mantine/core';


function Demo() {
  return (
    <Text sx={{ color: '#00ECE5', fontSize: 18, lineHeight: 1.4 }}>Text with custom styles</Text>
  );
}

You can use pseudo-classes, media queries and all other nested selectors with sx:

import { Text } from '@mantine/core';


function Demo() {
  return (
    <Text
      sx={{
        '&:hover': {
          backgroundColor: '#eee',
        },


        '@media (max-width: 755px)': {
          fontSize: 14,
        },
      }}
    >
      My custom text
    </Text>
  );
}

Subscribe to theme

Use function instead of an object to subscribe to the theme:

import { Text } from '@mantine/core';


function Demo() {
  return (
    <Text
      sx={(theme) => ({
        // subscribe to color scheme changes
        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.blue[0],


        // or use any other static values from theme
        color: theme.colors.gray[1],
        fontSize: theme.fontSizes.sm,
        fontWeight: 500,
      })}
    >
      My custom text
    </Text>
  );
}

sx array

Array syntax can be used to simultaneously use sx prop and add it from props:

import { Button, Sx } from '@mantine/core';


interface MyButtonProps {
  sx?: Sx;
}


function MyButton({ sx }: MyButtonProps) {
  return <Button sx={[{ color: 'red' }, sx]}>My Button</Button>;
}

If you want to keep sx array syntax support for child component use packSx function:

import { Button, packSx, Sx } from '@mantine/core';


interface MyButtonProps {
  sx?: Sx | Sx[];
}


function MyButton({ sx }: MyButtonProps) {
  return <Button sx={[{ color: 'red' }, ...packSx(sx)]}>My Button</Button>;
}

You will also need to use packSx function if you are extending DefaultProps type:

import { Button, packSx, DefaultProps } from '@mantine/core';


interface MyButtonProps extends DefaultProps {}


function MyButton({ sx, ...others }: MyButtonProps) {
  return (
    <Button sx={[{ color: 'red' }, ...packSx(sx)]} {...others}>
      My Button
    </Button>
  );
}

Box component

Box is an utility polymorphic component that can be used to style non Mantine components or elements with sx prop:

import { Box } from '@mantine/core';
import { Link } from 'react-router-dom';


// Box with custom element
function BoxWithElement() {
  return (
    <Box
      component="a"
      href="https://mantine.dev"
      target="_blank"
      sx={(theme) => ({
        color: theme.colors.blue[5],
        textDecoration: 'none',


        '&:hover': {
          color: theme.colors.blue[7],
        },
      })}
    >
      Custom link
    </Box>
  );
}


// Box with custom component
function BoxWithComponent() {
  return (
    <Box
      component={Link}
      to="/route"
      sx={(theme) => ({
        color: theme.colors.blue[5],
        textDecoration: 'none',


        '&:hover': {
          color: theme.colors.blue[7],
        },
      })}
    >
      Custom react-router link
    </Box>
  );
}

Storing styles in a variable

To create sharable styles you can store them in a variable:

import { Text, Box, CSSObject } from '@mantine/core';


// styles object is compatible with every Mantine component
const styles: CSSObject = {
  border: '1px solid #eee',
  color: '#999',


  '&:hover': {
    backgroundColor: '#eee',
  },
};


function Demo() {
  return (
    <>
      <Text sx={styles} />
      <Box sx={styles} />
    </>
  );
}

To store function styles in a variable you will need to use MantineTheme type in case you are using TypeScript:

import { Text, Box, CSSObject, MantineTheme } from '@mantine/core';


const styles = (theme: MantineTheme): CSSObject => ({
  border: `1px solid ${theme.colors.gray[3]}`,
  color: theme.colors.gray[7],


  '&:hover': {
    backgroundColor: theme.colors.gray[0],
  },
});


function Demo() {
  return (
    <>
      <Text sx={styles} />
      <Box sx={styles} />
    </>
  );
}
Go back
Emotion cache – Theming
Up next
createStyles – Styles
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