K

Styles API

All Mantine components support styling of each component part with inline styles or by passing classNames.

Styling with classNames

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

20%
50%
80%

But default slider has completely different styles:

20%
50%
80%
Type
Color
Size
Radius

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

NameStatic selectorDescription
root.mantine-slider-rootRoot element
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
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 react-jss or any other any other styling tools and languages:

import { createUseStyles } from 'react-jss';
import { Slider, theming } from '@mantine/core';
const useStyles = createUseStyles(
(theme) => ({
track: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.blue[1],
},
label: {
fontSize: 16,
bottom: -36,
top: 'unset',
},
mark: {
width: 2,
borderRadius: 0,
transform: 'translateX(-2px)',
borderColor: theme.colors.blue[3],
},
markLabel: {
fontSize: theme.fontSizes.xs,
marginBottom: 5,
marginTop: 0,
},
markWrapper: {
display: 'flex',
flexDirection: 'column-reverse',
top: 'unset',
bottom: 0,
},
thumb: {
backgroundColor: theme.white,
border: `1px solid ${theme.colors.gray[3]}`,
boxShadow: theme.shadows.sm,
},
}),
{ theming }
);
function MyCustomSlider() {
const classes = useStyles();
return (
<Slider
classNames={{
track: classes.track,
label: classes.label,
mark: classes.mark,
markLabel: classes.markLabel,
markWrapper: classes.markWrapper,
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
inner.mantine-button-innerContains label, left and right icons
label.mantine-button-labelContains button children

Here extra styles are required only for root element and left icon:

<Button
component="a"
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/mantinedev"
leftIcon={<TwitterLogoIcon width={18} height={18} />}
styles={{
root: {
backgroundColor: '#00acee',
textShadow: 'unset',
border: 0,
height: 42,
paddingLeft: 20,
paddingRight: 20,
},
leftIcon: {
marginRight: 15,
},
}}
>
Follow on Twitter
</Button>

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.

More examples

Calendar component

Calendar component customization with styles API:
July 2021
Mo
Tu
We
Th
Fr
Sa
Su
import { useState } from 'react';
import { useMantineTheme } from '@mantine/core';
import { Calendar } from '@mantine/dates';
function Demo() {
const theme = useMantineTheme();
const [value, setValue] = useState(new Date());
return (
<Calendar
value={value}
onChange={setValue}
month={value}
fullWidth
size="xl"
styles={{
cell: {
border: `1px solid ${
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
}`,
},
day: { borderRadius: 0, height: 70, fontSize: theme.fontSizes.lg },
weekday: { fontSize: theme.fontSizes.lg },
weekdayCell: {
fontSize: theme.fontSizes.xl,
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
border: `1px solid ${
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
}`,
height: 70,
},
}}
/>
);
}

Tabs component

Tabs component customization with styles API:
import { createUseStyles } from 'react-jss';
import { theming, Tabs, Tab } from '@mantine/core';
const useStyles = createUseStyles(
(theme) => ({
tabControl: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9],
border: `1px solid ${
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[4]
}`,
fontSize: theme.fontSizes.md,
padding: [theme.spacing.lg, theme.spacing.xl],
'& + &': {
borderLeft: 0,
},
'&:first-of-type': {
borderTopLeftRadius: theme.radius.md,
borderBottomLeftRadius: theme.radius.md,
},
'&:last-of-type': {
borderTopRightRadius: theme.radius.md,
borderBottomRightRadius: theme.radius.md,
},
},
tabActive: {
backgroundColor: theme.colors.blue[7],
borderColor: theme.colors.blue[7],
color: theme.white,
},
}),
{ theming }
);
function StyledTabs(props: TabsProps) {
const classes = useStyles();
return <Tabs variant="unstyled" classNames={classes} {...props} />;
}
function Demo() {
return (
<StyledTabs>
<Tab label="Settings" icon={<GearIcon width={16} height={16} />} />
<Tab label="Messages" icon={<ChatBubbleIcon width={16} height={16} />} />
<Tab label="Gallery" icon={<ImageIcon width={16} height={16} />} />
</StyledTabs>
);
}

Accordion component

Accordion component customization with styles API:
Colors, fonts, shadows and many other parts are customizable to fit your design needs
Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
import { createUseStyles } from 'react-jss';
import { Accordion, AccordionItem, AccordionProps, theming } from '@mantine/core';
const useStyles = createUseStyles(
(theme) => ({
control: {
fontSize: theme.fontSizes.lg,
},
item: {
border: `1px solid ${theme.colors.gray[4]}`,
'&:first-of-type': {
borderTopRightRadius: theme.radius.sm,
borderTopLeftRadius: theme.radius.sm,
},
'&:last-of-type': {
borderColor: theme.colors.gray[4],
borderBottomRightRadius: theme.radius.sm,
borderBottomLeftRadius: theme.radius.sm,
},
'& + &': {
borderTop: 'none',
},
},
itemOpened: {
'& $control': {
backgroundColor: theme.colors.blue[0],
color: theme.colors.blue[9],
},
},
contentInner: {
paddingTop: theme.spacing.md,
},
}),
{ theming }
);
function StyledAccordion(props: AccordionProps) {
const classes = useStyles();
return <Accordion classNames={classes} {...props} />;
}
function Demo() {
return (
<StyledAccordion>
<AccordionItem label="Customization">
Colors, fonts, shadows and many other parts are customizable to fit your design needs
</AccordionItem>
<AccordionItem label="Flexibility">
Configure components appearance and behavior with vast amount of settings or overwrite any
part of component styles
</AccordionItem>
<AccordionItem label="No annoying focus ring">
With new :focus-visible pseudo-class focus ring appears only when user navigates with
keyboard
</AccordionItem>
</StyledAccordion>
);
}
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback