Using Mantine for building custom elements

[johan3040]

Hi,
I'm having a hard time understanding how I can use Mantine for my app (entire app is converted to custom element).
Is there a way to restrict mantine to the component scope, instead of the entire page? Eg data-mantine-color-scheme is set on the host page tag.

How can I

1. Restrict global styles to the shadow DOM :host
2. Prevent mantine provider to hijack elements outside of shadow DOM?

[rtivital]

1. Mantine provides css files for each package. You can use the code from these files any way that is required by your build tool/framework
2. MantineProvider behavior can be configure via props, see documentation to learn more – https://mantine.dev/theming/mantine-provider/

[johan3040]

Thanks for the reply!
Even if the packages have their own css, it is still required to import the global styles.css, right? (as per the docs). Is there another way around this?

[rtivital]

It is not required to import any CSS files, only those you need in your application. If you do not need global styles you can skip importing it, or you want to inject them differently, you can add contents of the file any way you choose.