Mantine setting styles on body & :root

[matthewlipski]

Hi, I'm a developer on BlockNote, and we're using Mantine for our UI. After migrating to v7 I noticed that importing @mantine/core/style.css sets several styles on body and :root. This causes issues as while the editor uses Mantine, whatever app BlockNote is being imported into might not. Any components there which happen to inherit these styles from body or :root will therefore be styled incorrectly.

So, is there a recommended way to reset the styles set on body or :root, or maybe plans to make it so that Mantine styles can be scoped to a certain element? Thanks in advance

[rtivital]

You can include only styles that are required for components that you use with https://mantine.dev/styles/css-files-list/
If you do not import import '@mantine/core/styles/global.css';, then there will be no global styles. Note that you will need to define default CSS variables on your side if MantineProvider is supposed to be supplied by end users. If you include MantineProvider in your library, then set https://mantine.dev/theming/mantine-provider/#cssvariablesselector, in this case CSS variables will be generated in the runtime. Additionally, I recommend copying global styles that are defined for body and * to the root element of your component.

[matthewlipski]

Worked great, thanks!