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