Migrate "createStyles" from v6 to v7

[atumas-bananamilk]

What package has an issue?

@mantine/core

Describe the bug

7.xx has breaking changes, and we're basically wasting time now migrating (in addition to Next12 -> Next14 migration), for something that seems like an update with no value added to the customer.

createStyles has been deprecated and replaced by CSS modules. We have 100+ files (300+ components) that use createStyles and it was SUPER HANDY to write CSS by passing variables into it and using theme, theme.colorScheme, theme.colors[theme.primaryColor].

So we now have to write +100 more files as "CSS modules" for each component? That's just ridiculous. It's not even easier to manage CSS since we used to quickly create CSS classes without switching files. Not anymore.

Is there a way to replace something like this WITHOUT WRITING CSS MODULES?

We used to call it like this: const { classes, theme } = useStyles({ width, height })

We used to use it like this: <AppShell className={classes.main}>

So we need a quick way to migrate by still keeping this functionality:

• colorScheme as variable
• primaryColor as variable
• pass variables to CSS (width, height, etc)
• requires minimal code / files to migrate v6 -> v7 for styles

We have 300+ components that are written using createStyles, and creating 100+ more files doesn't make any sense to us.

Thanks

What version of @mantine/ packages do you have in package.json? (Note that all @mantine/ packages must have the same version in order to work correctly)

^7.2.2

If possible, please include a link to a codesandbox with a minimal reproduction

No response

Do you know how to fix the issue

None

Do you want to send a pull request with a fix?

None

Possible fix

No response

[rtivital]

I'm not planning to add and maintain createStyles function because:

• It is incompatible with Next.js app router, server components, server streaming, edge runtime
• It takes a lot of effort to maintain ssr
• Even if it is ported back, it will not be compatible with 7.x theme object which does not include colorScheme

7.xx has breaking changes, and we're basically wasting time now migrating (in addition to Next12 -> Next14 migration), for something that seems like an update with no value added to the customer.

Why waste time then? If you think that there is no value, then there is no reason to migrate to 7.x. You can continue using version 6.x as long as you need – it will always be available to install on npm.

So we now have to write +100 more files as "CSS modules" for each component? That's just ridiculous. It's not even easier to manage CSS since we used to quickly create CSS classes without switching files. Not anymore.

You are not limited to styling components with CSS modules – it is a recommended tool, not a requirement. In your project, you can write styles with any tool you are comfortable with: Emotion, Tailwind, styled-components, etc. See https://mantine.dev/styles/css-modules/#styling-mantine-components-without-css-modules

If you want to continue using a CSS-in-JS library in your application, you can:

• Stay on 6.x
• Use Vanilla extract
• Use one of the tss templates provided by the community
• Get to 6.x codebase, copy createStyles function in your project and modify it based on your project requirements

[atumas-bananamilk]

Yes, so how do we get these variables if we use:

• CSS modules
• use style attributes

Variables:

• colorScheme
• primaryColor
• pass values as variables (width, height, etc)

Any examples? Basically I want to convert that screenshot I attached for 6.x into 7.x. I was unable to.

[rtivital]

colorScheme is not a variable. It is data-mantine-color-scheme attribute on the root element. You can access it with selector: :root[data-mantine-color-scheme="light"] .your-selector {}.

You can find the full CSS variables list on this page – https://mantine.dev/styles/css-variables-list/ To access primary color, use --mantine-primary-color-filled variable.

To pass values to styles, use CSS variables, for example <Box style={{ '--width': rem(yourVariable) }} />, then use variables in styles: .selector { width: var(--width) }.

You can access Mantine CSS variables anywhere in your application, it does not depend on styling tool that you use.

[seeratawan01]

If you're not utilizing Server Side Rendering (SSR) and want to utilize the colorScheme like in v6, here's a straightforward hook for v7.

import { useMantineTheme } from "@mantine/core";
import { useEffect, useMemo, useState } from "react";
import { MantineTheme } from "@mantine/core";

export interface GlobalMantineTheme extends MantineTheme {
  colorScheme: string
}

const useGlobalMantineTheme = (): GlobalMantineTheme => {
  const theme = useMantineTheme();
  const [colorScheme, setColorScheme] = useState(
    document.documentElement.getAttribute("data-mantine-color-scheme") || "light"
  );

  useEffect(() => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'data-mantine-color-scheme') {
          setColorScheme(document.documentElement.getAttribute('data-mantine-color-scheme') || "light");
        }
      });
    });

    observer.observe(document.documentElement, {
      attributes: true
    });

    return () => {
      observer.disconnect();
    };
  }, []);

  const globalTheme = useMemo(
    () => ({
      ...theme,
      colorScheme,
    }),
    [theme, colorScheme]
  );

  return globalTheme;
};

export default useGlobalMantineTheme;