# StyleProp

# 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](https://mantine.dev/llms/styles-css-variables.md) in the style object
the same way as in [.css files](https://mantine.dev/llms/styles-css-modules.md).

```tsx
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:

```tsx
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](https://mantine.dev/llms/theming-theme-object.md).
It is useful when you need to access [theme](https://mantine.dev/llms/theming-theme-object.md) properties that are not exposed as [CSS variables](https://mantine.dev/llms/styles-css-variables.md),
for example, properties from `theme.other`.

```tsx
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.

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

interface DemoProps {
  style?: MantineStyleProp;
}

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