6.x → 7.x migration guide
This guide is intended to help you migrate your project styles from 6.x to 7.x. It is not intended to be a comprehensive guide to all the changes in 7.x. For that, please see the 7.0.0 changelog.
Before getting started, it is recommended to go through styles documentation. Most notable parts:
Note that this guide assumes that you have postcss-preset-mantine installed and configured in your project.
createStyles function is no longer available in 7.0. Use CSS Modules instead.
sx prop is no longer available in 7.0. Use
className or style prop instead.
Nested selectors are not supported in style prop, use
styles prop no longer supports nested selectors. Use
classNames instead to apply styles to nested elements.
Regular selectors are still supported:
Global component and global styles on theme are not available in 7.0. Instead,
create a global stylesheet (
.css file) and import it in your application entry point.
Color scheme value is managed by MantineProvider,
theme object no longer includes
Although it is still possible to access color scheme value in components with
it is not recommended to base your styles on its value. Instead, use
light-dark CSS function.
Example of 6.x
theme.colorScheme migration to 7.0:
Note that if your application has server-side rendering, you should not render any
elements based on its value (more info).
dark mixins or
light-dark function to hide/display elements based
on color scheme value.
Color scheme toggle example: