v4.2.12

sx prop

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

sx object

With sx prop, you can add inline styles to any component the same way you would do it as with createStyles function. Styles added with sx will be parsed by emotion and added to page head or specified target container in MantineProvider.

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 a function instead of an object to subscribe to Mantine 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 }) {
  return <Button sx={[{ color: 'red' }, sx]}>My Button</Button>;
}

Box component

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

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
Theme object – Theming
Up next
createStyles – Theming
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
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