Styles API

With Styles API you can overwrite styles of inner elements in Mantine components with classNames or styles props.

Styling with classNames

Let's say you want to make Slider component look like this:

20%

50%

80%

But default slider has completely different styles:

20%

50%

80%

Type

Default

Range

Color

Shades

Size

Radius

Show label on hover

Label always on

To apply your styles to Slider component, go to "Styles API" tab under component documentation and find styles names table. The name column will tell you how to target a specific element inside the component:

Name	Static selector	Description
root	.asuikit-Slider-root	Root element
trackContainer	.asuikit-Slider-trackContainer	Wrapper around track, handles drag events
track	.asuikit-Slider-track	Track element, contains all other elements
bar	.asuikit-Slider-bar	Filled part of the track
thumb	.asuikit-Slider-thumb	Main control
dragging	.asuikit-Slider-dragging	Styles added to thumb while dragging
label	.asuikit-Slider-label	Label element, displayed above thumb
marksContainer	.asuikit-Slider-marksContainer	Wrapper around all marks, helps position the marks above the track
markWrapper	.asuikit-Slider-markWrapper	Wrapper around mark, contains mark and mark label
mark	.asuikit-Slider-mark	Mark displayed on the track
markFilled	.asuikit-Slider-markFilled	Styles added to mark when it is located in filled area
markLabel	.asuikit-Slider-markLabel	Mark label, displayed below track

For example, if you want to add styles to slider thumb:

// Add className to thumb
<Slider classNames={{ thumb: 'my-slider-thumb' }} />

// Add inline styles to thumb
<Slider styles={{ thumb: { backgroundColor: 'red' } }} />

Now you can write styles for your component with createStyles function or any other styling tools and languages:

import { Slider, createStyles, rem } from '@asuikit/core';

const useStyles = createStyles((theme) => ({
  track: {
    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1],
  },
  mark: {
    width: rem(6),
    height: rem(6),
    borderRadius: rem(6),
    transform: `translateX(-${rem(3)}) translateY(-${rem(2)})`,
    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1],
  },
  markFilled: {
    borderColor: theme.colors.blue[6],
  },
  markLabel: { fontSize: theme.fontSizes.xs, marginBottom: rem(5), marginTop: 0 },
  thumb: {
    height: rem(16),
    width: rem(16),
    backgroundColor: theme.white,
    borderWidth: 1,
    boxShadow: theme.shadows.sm,
  },
}));

function Demo() {
  const { classes } = useStyles();

  return (
    <Slider
      classNames={{
        track: classes.track,
        mark: classes.mark,
        markFilled: classes.markFilled,
        markLabel: classes.markLabel,
        thumb: classes.thumb,
      }}
    />
  );
}

Styling with inline styles

Same as in the above example – to make this twitter button you will need to use styles API:

Follow on Twitter

Styles names for button component:

Name	Static selector	Description
root	.asuikit-Button-root	Root button element
icon	.asuikit-Button-icon	Shared icon styles
leftIcon	.asuikit-Button-leftIcon	Left icon
rightIcon	.asuikit-Button-rightIcon	Right icon
centerLoader	.asuikit-Button-centerLoader	Center loader
inner	.asuikit-Button-inner	Contains label, left and right icons
label	.asuikit-Button-label	Contains button children

For this button, extra styles are required only for root element and left icon:

Follow on Twitter

import { Group, Button, rem } from '@asuikit/core';
import { IconBrandTwitter } from '@tabler/icons-react';

function Demo() {
  return (
    <Group position="center">
      <Button
        component="a"
        target="_blank"
        rel="noopener noreferrer"
        href="https://twitter.com/mantinedev"
        leftIcon={<IconBrandTwitter size={rem(18)} />}
        styles={(theme) => ({
          root: {
            backgroundColor: '#00acee',
            border: 0,
            height: rem(42),
            paddingLeft: rem(20),
            paddingRight: rem(20),
            '&:not([data-disabled])': theme.fn.hover({
              backgroundColor: theme.fn.darken('#00acee', 0.05),
            }),
          },

          leftIcon: {
            marginRight: theme.spacing.md,
          },
        })}
      >
        Follow on Twitter
      </Button>
    </Group>
  );
}

Styles API with MantineProvider

You can also use Styles API in MantineProvider with styles prop. All styles defined there will be added to each component rendered inside provider.

Dot badge

import { MantineProvider, Group, Button, Badge, ButtonStylesParams } from '@asuikit/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            // Subscribe to theme and component params
            styles: (theme, params: ButtonStylesParams, { variant }) => ({
              root: {
                height: '2.625rem',
                padding: '0 1.875rem',
                backgroundColor:
                  variant === 'filled'
                    ? theme.colors[params.color || theme.primaryColor][9]
                    : undefined,
              },
            }),
          },

          Badge: {
            // Use raw styles object if you do not need theme dependency
            styles: {
              root: { borderWidth: '0.125rem' },
            },
          },
        },
      }}
    >
      <Group position="center">
        <Button variant="outline">Outline button</Button>
        <Button variant="filled" color="cyan">Filled button</Button>
        <Badge variant="dot">Dot badge</Badge>
      </Group>
    </MantineProvider>
  );
}

root selector

If component does not specify Styles API selectors, then in most cases you can add styles using root selector:

import { MantineProvider, Text } from '@asuikit/core';

function App() {
  return (
    <MantineProvider
      theme={{
        components: {
          Text: {
            styles: {
              root: { fontSize: '2rem' },
            },
          },
        },
      }}
      withGlobalStyles
      withNormalizeCSS
    >
      <Text>2rem text</Text>
    </MantineProvider>
  );
}

Inputs Styles API on MantineProvider

Most of input components are based on Input and Input.Wrapper components, you can change shared styles on MantineProvider:

TextInput with custom styles

Description below the input

NumberInput with custom styles

Description below the input

import { TextInput, NumberInput, MantineProvider } from '@asuikit/core';

function Demo() {
  return (
    <MantineProvider
      inherit
      theme={{
        components: {
          InputWrapper: {
            styles: (theme) => ({
              label: {
                backgroundColor:
                  theme.colorScheme === 'dark' ? 'rgba(255, 255, 255, .1)' : 'rgba(0, 0, 0, .1)',
              },
            }),
          },

          Input: {
            styles: (theme) => ({
              input: { borderColor: theme.colors.purple[theme.fn.primaryShade()] },
            }),
          },
        },
      }}
    >
      <TextInput
        label="TextInput with custom styles"
        placeholder="TextInput with custom styles"
        description="Description below the input"
      />
      <NumberInput
        mt="xl"
        label="NumberInput with custom styles"
        placeholder="NumberInput with custom styles"
        description="Description below the input"
      />
    </MantineProvider>
  );
}

Static class names

Apart from classNames and styles props, each component also has static classes on each element. You can use them to apply your styles if you do not use CSS modules or just do not want to pass classNames prop.

Unstyled components

All Mantine components support unstyled prop which removes all non-essential Mantine styles from the component. This is useful when you want to add new components styles with Styles API without overriding default styles.

Unstyled Tabs:

Chat panel

Gallery panel

Account panel

Unstyled Accordion:

Customization

Flexibility

No annoying focus ring