Style prop

All Mantine components that have root element support style prop. It works similar to 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 React style prop. You can use Mantine CSS variables in 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 it 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 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 style prop – in this case, all styles will be merged into one object. It is useful when you want to create a wrapper around Mantine component, add inline styles and keep the option to pass style prop to it.

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

interface DemoProps {
  style?: MantineStyleProp;
}

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