🐛 Bug Report: Styling issue with the React Notification Center Settings

[psteinroe]

📜 Description

Hey!

The styling of the React Notification Center Settings screen is off. There are customisation options for the component, but our expectation was that there is a basic styling applied by default. Hence this issue to find out if this is expected behaviour, missing config, or a bug.

👟 Reproduction steps

Add the Notification Center component into a react app. We are using nextjs with tailwind.

👍 Expected behavior

Have a decent default styling.

👎 Actual Behavior with Screenshots

Especially the toggles are broken.

💻 Operating system

Something else

🤖 Node Version

18

📃 Provide any additional context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• [X] I have read the Contributing Guidelines

Are you willing to submit PR?

Yes I am willing to submit a PR!

[jainpawan21]

Hi @psteinroe This is strange behaviour. Did you try to use notification center in non tailwind project? @LetItRock wdyt, can tailwind create issue in styling?

[dwome]

Hello @jainpawan21, FYI We did not yet try in a non-tailwind project :-)

[scopsy]

Another small question @psteinroe are you using the react component provided? Seems like you have some global styles that override the notification center specific styles. Could you try inspecting the component node with "Chrome Inspect"? To see what overrides the default styles?

[psteinroe]

@scopsy it seems like the Tailwind base layer styles conflict with mantine styling... we "fixed" it for now by adding the following css.

.mantine-yuke8a {
   @apply min-w-0 !important;
 }

The font is still not working in the subscriber preferences, but at least the checkbox is usable.

[mosamlife]

Any update on this I have the same issue with mantine.

[scopsy]

@mosamlife unfortunately not yet :( We need to somehow namespace all mantine classes there. The long term approach for us is to actually move away from mantine to a custom implementation but it will take some time