Styling with react-jss

All Mantine components are built with react-jss. We recommend to use react-jss to style the rest of your application as it provides you with the most convenient way to utilize Mantine theme, but it is not required – you can use any other styling tools and languages.

Theming context

If your application is wrapped with MantineProvider you can utilize theming context with createStyles function:

import { createStyles } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  wrapper: {
    background: theme.colors.gray[5],
  },
}));

function YourComponent() {
  const classes = useStyles();
  return <div className={classes.wrapper} />;
}

Theme as function value

This way will work in all cases no matter if you use MantineProvider or not:

import { createUseStyles } from 'react-jss';
import { useMantineTheme } from '@mantine/core';

const useStyles = createUseStyles({
  wrapper: ({ theme }) => ({
    background: theme.colors.gray[5],
  }),
});

function YourComponent() {
  const classes = useStyles({ theme: useMantineTheme() });
  return <div className={classes.wrapper} />;
}

getFocusStyles util

getFocusStyles function returns mantine focus styles in jss format for interactive elements. Focus styles are visible only when user navigates with keyboard.

import { getFocusStyles, createStyles } from '@mantine/core';

createStyles((theme) => ({
  button: {
    ...getFocusStyles(theme),
    color: 'red',
  },
}));

getFontStyles util

getFontStyles function returns font styles from theme with font smoothing:

import { getFontStyles, createStyles } from '@mantine/core';

createUseStyles((theme) => ({
  wrapper: {
    ...getFontStyles(theme),
    color: 'red',
  },
}));

Build fully functional accessible web applications with ease

Project

Contribute to Mantine Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter Github discussions

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

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter