Any way not to have Mantine set styles globally?

[vincaslt]

Describe the bug

BlockNote styles are importing Mantine styles which set a bunch of global styles. Maybe makes sense if your whole project is using Mantine, but mine doesn't and these things interfere with existing custom styles in my project (see below).

Additionally Mantine sets a bunch of color variables that I don't know if even BlockNote is using, so it's a bunch of extra useless css in the bundle.

*,:after,:before {
    box-sizing: border-box
}

button,input,select,textarea {
    font: inherit
}

button,select {
    text-transform: none
}

body {
    -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
    -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
    background-color: var(--mantine-color-body);
    color: var(--mantine-color-text);
    font-family: var(--mantine-font-family);
    font-size: var(--mantine-font-size-md);
    line-height: var(--mantine-line-height);
    margin: 0
}

@media screen and (max-device-width: 500px) {
    body {
        -webkit-text-size-adjust:100%
    }
}

@media (prefers-reduced-motion:reduce) {
    [data-respect-reduced-motion] [data-reduce-motion] {
        animation: none;
        transition: none
    }
}

[data-mantine-color-scheme=dark] .mantine-dark-hidden,[data-mantine-color-scheme=light] .mantine-light-hidden {
    display: none
}

To Reproduce
<links to a sandbox or clear steps to reproduce are super helpful!>

Misc

• Node version:
• Package manager:
• Browser:
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[rockiger]

Yes, Mantine seems to be a problematic dependency. It also messes the Blocknote website up in dark-mode:

Source: https://www.blocknotejs.org/examples/custom-ui

[leighton-tidwell]

I was experiencing this as well using tailwind, it was causing my theme to always default to dark mode. I have since fixed it by hardcoding the page to be light (I don't need a dark mode for my application).

html {
  color-scheme: light !important;
}

[matthewlipski]

So there's not really a way of removing or scoping those styles unfortunately, it's been a running issue since updating to Mantine v7. I added a fix in #553 which resets the styles, though this obviously isn't ideal since:

1. It clutters the CSS since styles are set and promptly unset
2. It will override those styles set on body, :root, etc, that are set by other stylesheets and loaded earlier

[Bat-m]

I was experiencing this as well using tailwind, it was causing my theme to always default to dark mode. I have since fixed it by hardcoding the page to be light (I don't need a dark mode for my application).

html {
  color-scheme: light !important;
}

I got a problem with the update of block note also
and suddenly all my background was in dark mode
looks like mantine problem
i add the line code you give and it works well
but all my text comes black and not the color by default

[matthewlipski]

Is this on 0.11.2? We pushed a new fix for this with #553, since we found a way to prevent Mantine global styles from being imported in the first place. Basically BlockNote should no longer be setting any styles on html. Can you check if your issue persists on the new version? Or if you're already on the new version, I'll look into it.