This guide will help you migrate your project styles from 6.x to 7.x. It's not intended to be a comprehensive guide covering all changes in 7.x. For a complete overview, please see the 7.0.0 changelog .
The @mantine/emotion package has been available since version 7.9. If you don't want to use CSS modules, have many styles created with createStyles , sx and styles props, or simply prefer CSS-in-JS syntax, you can migrate to @mantine/emotion . To view the full documentation for the @mantine/emotion package, visit this page .
The createStyles function and Global component are no longer available in the @mantine/core package. Change imports to @mantine/emotion :
sx and styles props are available in 7.x the same way as in 6.x after setup :
In v7, the color scheme value is managed by MantineProvider , and the theme object no longer includes the colorScheme property. Although it's still possible to access the color scheme value in components with the useMantineColorScheme hook, it's not recommended to base your styles on its value. Instead, use the light / dark utilities .
Example of 6.x createStyles with theme.colorScheme migration to 7.0:
Before getting started, we recommend going through the styles documentation. The most notable sections are:
Note that this guide assumes you have postcss-preset-mantine installed and configured in your project.
The createStyles function is no longer available in 7.0. Use CSS Modules instead.
The sx prop is no longer available in 7.0. Use className or the style prop instead.
Nested selectors are not supported in the style prop ; use className instead:
The styles prop no longer supports nested selectors. Use classNames instead to apply styles to nested elements.
Regular selectors are still supported:
The Global component and global styles on the theme are not available in 7.0. Instead, create a global stylesheet ( .css file) and import it at your application entry point.
All theme properties are now available as CSS variables . We recommend using CSS variables instead of referencing the theme object in styles.
The color scheme value is managed by MantineProvider , and the theme object no longer includes the colorScheme property. Although it's still possible to access the color scheme value in components with the useMantineColorScheme hook, it's not recommended to base your styles on its value. Instead, use the light / dark mixins or the light-dark CSS function .
Note that if your application has server-side rendering, you should not render any elements based on its value ( more info ). Instead, use the light / dark mixins or the light-dark function to hide/show elements based on the color scheme value.
Color scheme toggle example:
7.x to 8.x migration