How to prevent <style data-mantine-styles="classes"> to be added?

[ghost]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

^7.4.1

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

I'm using Jest Snapshot Testing for some of my components. I've noticed that a <style data-mantine-styles="classes"> is automatically as child of <MantineProvider>. After taking a look on code, I could confirm that here:

https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/MantineProvider.tsx#L92

That introduces noise to the snapshot testing, because the snapshot tests fail even for changes that are not directly related to the tested component, like breakpoints.

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

No response

Possible fix

1. Expose <MantineClasses> over index.ts file, so we can mock it and prevent the behavior OR
2. Add a flag to control the addition of <MantineClasses>, just like it was made for <MantineCssVariables>.

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Currently, it is not supported. In one of the next releases, new HeadlessMantineProvider component will be added. This component will remove every extra styles.

[tonai]

In my case I use nested MantineProvider to theme parts of the application.
In that case it would also be great to have an option to not generate the <MantineClasses> component, because CSS classes generated by <MantineClasses> are not specifically scoped to the provider.
Would be <HeadlessMantineProvider> a solution in that case ?
Or maybe another solution would be to inject the cssVariablesSelector from MantineProvider inside the <MantineClasses> ?

[philipp985]

Is there any drawback in just using this

<MantineProvider theme={theme} withGlobalClasses={false} withCssVariables={false}>

in tests? This ignores the <style> tags.