Style prop

All Mantine components that have a root element support the style prop. It works similarly to the React style prop, but with some additional features.

Style object

You can pass a style object to the style prop – in this case it works the same way as the React style prop. You can use Mantine CSS variables in the style object the same way as in .css files.

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

function Demo() {
  return (
    <Box
      style={{
        color: 'var(--mantine-color-red-5)',
        fontSize: rem(12),
      }}
    />
  );
}

Define CSS variables in style prop

You can define CSS variables in the style prop. Note that this only works with Mantine components:

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

function Demo() {
  return (
    <Box
      style={{ '--radius': '0.5rem', borderRadius: 'var(--radius)' }}
    />
  );
}

Style function

You can pass a style function to the style prop – in this case it will be called with the theme. It is useful when you need to access theme properties that are not exposed as CSS variables, for example, properties from theme.other.

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

function Demo() {
  return (
    <Box
      style={(theme) => ({
        color: theme.colors.red[5],
        fontSize: theme.fontSizes.xs,
      })}
    />
  );
}

Styles array

You can pass an array of style objects and/or functions to the style prop – in this case, all styles will be merged into one object. It is useful when you want to create a wrapper around a Mantine component, add inline styles and keep the option to pass the style prop to it.

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

interface DemoProps {
  style?: MantineStyleProp;
}

function Demo({ style }: DemoProps) {
  return <Box style={[{ color: 'red' }, style]} />;
}