[BUG] Editor styles overwriting global styles

[chrassendk]

Has this bug been raised before?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Description

When embedding the editor the local styles for the editor is globally applied. . https://github.com/Darginec05/Yoopta-Editor/blob/cd8c25f695296c87ae27138330038d931301f663/packages/core/editor/src/styles.css

Steps to Reproduce

1. Add editor.
2. Tailwind buttons e.g. loose their border

Environment

• OS:
• Browser:

Screenshots

Do you want to work on this issue?

No

If "yes" to above, please explain how you would technically implement this

No response

[XavierDK]

Hi 👋,

Here's a temporary fix that might help you:

useEffect(() => {
    document.head.querySelectorAll("style").forEach((style) => {
      if (style.innerHTML.includes("button")) {
        style.innerHTML = style.innerHTML.replace("border:none", "");
      }
    });
  }, []);

Hope this helps!

[chrassendk]

It will not work on SPA renderings, since it only runs on mount