getRootElement + cssVariablesSelector not working as expected

[steel schooner]

Greetings team! 👋 Great work on V7!

How do I have separation of concerns between nested Mantine providers? I have a use case where my npm library would have its own provider and its consumers may have their own provider. I used combination of getRootElement and cssVariablesSelector but no dice 😟

Trying to solve the following

1. Parent's theme toggle should not change the theme for nested components because its using a separate root
2. Select dropdown seems to have two sources of truth, parent and nested when used inside a nested provider. So the component's colour breaks when user changes the themes

Thanks again for creating such a good library!

Repro: https://codesandbox.io/p/sandbox/relaxed-stonebraker-w2tk25?file=%2Fsrc%2FApp.tsx%3A35%2C21

[terse gale]

Select dropdown is rendered in Portal by default, it inherits styles and css variables from the the root element. If you want this theming feature, disable portal.

[steel schooner]

I already did in the csb but the styles are still off when used with nested providers. Is this the right way to disable the portal?

comboboxProps={{
  withinPortal: false,
  portalProps: {
    target: `#nested-provider`,
  },
}}

re: #1 - any thoughts? Mantine supports nested providers but they're not isolated as you'd expect them to be. Shouldn't it pick the closest root to the provider? 🤔

[terse gale]

Mantine does not really support nested providers, it is stated in documentation that only one provider is recommended per app.

[steel schooner]

Is this something that Mantine would support? 🙏 I can help draft up a PR too with some guidance.

For context, our library is bringing in ~50K downloads a week so the impact of this would be great!. This would mean great user experience for the users using our library with Mantine.

[terse gale]

I do not mind supporting it, it just seems too complicated. You are welcome to try it out and submit a pr

[steel schooner]

Hm I see what you mean. One approach could be to make this data-mantine-color-scheme customizable via props but that might be hard.

Another one could be to update data-mantine-color-scheme via postcss? Do you have any other ideas?