Importing react style.css is breaking our own CSS

[charlesBochet]

Describe the bug
We are using your awesome BlockNote on Twenty and wanted to migrate to the new version: https://github.com/twentyhq/twenty/pull/3517/files

From the release notes:

Breaking Changes
Change import "@blocknote/core/style.css"; to import "@blocknote/react/style.css"; if you're using @blocknote/react

This update changes how themes and styles are applied to the editor. This means if you were previously overriding CSS using the componentStyles field in a Theme object, you should convert those styles to CSS rules. See the new theming and styling documentation [here](https://www.blocknotejs.org/docs/theming).

However, react/style.css does change the style of non block-note related class, for example:
body,html{height:100%}...

This is an issue as we import it in our project using @blocknote/react/style.css, it completely breaks our page layout.

Before:

After:

(see that the Sort button for example is broken)

[YousefED]

Thanks, we'll look into this asap!

[YousefED]

Should be fixed! closed by #535

[dogfootruler-kr]

Hello @YousefED,

I'm not sure this issue is fixed in the latest version :(.

Before:

After:

My yarn.lock file:

Thank you!

[CarlosVP120]

It still happens with Shadcn, when importing the styles.css file, it modifies the whole layout :(

[AIchovy]

It still happens with Shadcn, when importing the styles.css file, it modifies the whole layout :(

I also encountered the same problem. Import "@blocknote/mantine/style.css" made some styles of my page layout invalid.

[YousefED]

Other report here: https://discord.com/channels/928190961455087667/1216075332524969994/1216075332524969994. @CarlosVP120 @AIchovy could you share a bit more details about what's being reset / changed?

[matthewlipski]

I've looked into this and looks like there is a data-mantine-color-scheme attribute being added to the html root element (see #651, also seems likely to be causing @dogfootruler-kr's styling issue). However, that's the only thing I'm seeing Mantine set on either html, body, or #root so this should solve any remaining problems so I'll create a PR to fix that. In the meantime, I'd appreciate any additional examples of BlockNote/Mantine setting any styles on html, body, or #root elements (screenshots/snippets from browser inspector would be great). Thanks!