Prior to version 7.0, Mantine used Emotion as a styling solution. It was replaced with CSS modules in version 7.0, but you can still use Emotion with Mantine if you prefer it over CSS modules.
Note that the createStyles function, sx and styles props work differently from the same features in version 6.x . If you are planning to upgrade from version 6.x to 7.x, follow the migration guide .
The @mantine/emotion package is compatible with @mantine/core 7.9.0 and higher. Before installing, make sure that you are using the latest version of all @mantine/* packages.
Emotion is a runtime CSS-in-JS library – styles are generated and injected into the DOM at runtime. This approach has some limitations:
The @mantine/emotion package can be used with the following frameworks:
There is no official support (the package can probably be used but it's not tested and documentation is not provided) for:
Note that Emotion is not recommended for new projects. If you are starting a new project with Mantine, consider using CSS modules instead.
View example repository with full setup
Install dependencies:
Create emotion.d.ts file in src directory to add types support for sx and styles props:
Wrap your application with MantineEmotionProvider and add emotionTransform to MantineProvider :
Done! You can now use sx , styles props and createStyles in your application:
Create emotion folder with cache.ts and emotion.d.ts files.
Add the following content to pages/_document.tsx file:
Add MantineEmotionProvider and emotionTransform to pages/_app.tsx file:
Create app/emotion.d.ts file with the following content:
Create app/EmotionRootStyleRegistry.tsx file with the following content:
Add RootStyleRegistry , MantineEmotionProvider and emotionTransform to app/layout.tsx . It should look something like this:
Done! You can now use sx , styles props and createStyles in your application. Note that 'use client' is required in most components that use sx , styles or createStyles :
With the setup above you can use sx prop in all Mantine components. sx prop allows adding styles to the root element of the component. It accepts either a styles object or a function that receives theme, utilities and returns styles object:
You can use the mergeSx function to merge multiple sx props into one. This can be useful for merging sx prop provided to a custom component with its own sx , like so:
styles prop works similar to sx prop, but it allows adding styles to all nested elements of the components that are specified in the Styles API table. styles prop accepts either an object of styles objects or a function that receives theme, component props, utilities and returns styles object:
You can add styles to Mantine components with Styles API using Emotion with styles prop. Note that to avoid types collisions, you should not use Component.extend method and just pass component configuration object directly.
createStyles function accepts a function to generate styles with Emotion . The function receives 3 arguments that will be described more detailed in the following demos:
createStyles function returns useStyles hook that should be called in the component that uses given styles:
You can add pseudo-classes the same way as in any css-preprocessor like Sass:
You can receive any amount of parameters as second argument of createStyles function, latter you will need to pass those parameters as argument to useStyles hook:
Since createStyles produces scoped class names you will need to create a reference to selector in order to get static selector. Use u.ref function to assign static selectors:
To merge class names use cx function, it has the same api as clsx package.
!important: Do not use external libraries like classnames or clsx with class names created with createStyles function as it will produce styles collisions.
You can use nested media queries like in Sass. Within query body you can use theme.breakpoints defined with MantineProvider or just static values:
sx , styles and createStyles callback functions receive u object with utilities to generate selectors. u object contains the following properties:
All utilities except ref can be used as selectors in styles object: