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
Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl

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:

NameStatic selectorDescription
root.mantine-Slider-rootRoot element
trackContainer.mantine-Slider-trackContainerWrapper around track, handles drag events
track.mantine-Slider-trackTrack element, contains all other elements
bar.mantine-Slider-barFilled part of the track
thumb.mantine-Slider-thumbMain control
dragging.mantine-Slider-draggingStyles added to thumb while dragging
label.mantine-Slider-labelLabel element, displayed above thumb
marksContainer.mantine-Slider-marksContainerWrapper around all marks, helps position the marks above the track
markWrapper.mantine-Slider-markWrapperWrapper around mark, contains mark and mark label
mark.mantine-Slider-markMark displayed on the track
markFilled.mantine-Slider-markFilledStyles added to mark when it is located in filled area
markLabel.mantine-Slider-markLabelMark 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 '@mantine/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:

Styles names for button component:

NameStatic selectorDescription
root.mantine-Button-rootRoot button element
icon.mantine-Button-iconShared icon styles
leftIcon.mantine-Button-leftIconLeft icon
rightIcon.mantine-Button-rightIconRight icon
centerLoader.mantine-Button-centerLoaderCenter loader
inner.mantine-Button-innerContains label, left and right icons
label.mantine-Button-labelContains button children

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

import { Group, Button, rem } from '@mantine/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 '@mantine/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 '@mantine/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:

Description below the input
Description below the input
import { TextInput, NumberInput, MantineProvider } from '@mantine/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.violet[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
Account panel

Unstyled Accordion:

Examples

Tabs

Accordion

Colors, fonts, shadows and many other parts are customizable to fit your design needs