migration/6x-to-7x

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

@mantine/emotion package availability

The @mantine/emotion package has been available since version 7.9. It should be used if you do not want to use CSS modules, have many styles created with createStyles, sx and styles props, or prefer CSS-in-JS syntax.

createStyles and Global import changes in 7.x

In 7.x, createStyles and Global are no longer available in @mantine/core. They must be imported from @mantine/emotion instead. In 6.x they were imported from @mantine/core.

sx and styles props in 7.x with @mantine/emotion

When using @mantine/emotion setup, sx and styles props work the same way in 7.x as they did in 6.x with no code changes required.

theme.colorScheme removed in 7.x

In 7.x, the color scheme value is managed by MantineProvider and the theme object no longer includes the colorScheme property. The color scheme value can still be accessed with the useMantineColorScheme hook, but it is not recommended to base styles on this value.

Dark mode styling alternatives to theme.colorScheme

Instead of using theme.colorScheme in styles, use the light/dark utilities in @mantine/emotion, the light/dark mixins in PostCSS, or the light-dark CSS function.

createStyles function removed in CSS Modules migration

The createStyles function is no longer available in 7.0. Use CSS Modules instead. CSS variables from Mantine theme can be referenced with var(--mantine-*) syntax.

sx prop removed in CSS Modules migration

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 with CSS modules instead.

styles prop no longer supports nested selectors

In 7.0, the styles prop no longer supports nested selectors. Use classNames instead to apply styles to nested elements. Regular selectors (without nesting) are still supported.

Global component removed in 7.0

The Global component and global styles on the theme are not available in 7.0. Create a global stylesheet (.css file) and import it at your application entry point instead.

CSS variables for theme properties in 7.x

All theme properties are now available as CSS variables. Use CSS variables with var(--mantine-*) syntax instead of referencing the theme object in styles. For example, theme.colors.red[6] becomes var(--mantine-color-red-6), theme.spacing.xl becomes var(--mantine-spacing-xl).

light-dark CSS function for color scheme

The light-dark CSS function can be used to apply different styles based on color scheme. It takes two arguments: light mode value and dark mode value. Example: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6)).

light and dark PostCSS mixins for color scheme

The light and dark mixins can be used in CSS to apply different styles based on color scheme. The @mixin dark {} syntax applies styles only in dark mode.

Color scheme migration example from createStyles to CSS

When migrating from 6.x createStyles with theme.colorScheme checks to 7.x CSS, use either the light-dark function or light/dark mixins. Example in 6.x: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0]. In 7.x with light-dark: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6)).

Server-side rendering and color scheme pitfall

When an application has server-side rendering, do not render elements based on useMantineColorScheme hook value. Instead, use light/dark mixins or the light-dark function to hide/show elements based on color scheme.

PostCSS preset mantine required for CSS Modules migration

The migration to CSS modules assumes postcss-preset-mantine is installed and configured in your project.

Give your agent this brain