Third-party library styles collision

Question

Hi, I would like to include a third-party styles and javascript in the editor. They are being added like this:

... 
const editor = grapesjs.init({
  canvas: {
    styles: [
      /path/to/css/file
    ],
    scripts: [
      /path/to/js/file
    ]
  },
...
})
...

The issue I'm experiencing with the third-party CSS is that some of its style rules are colliding with the style rules of the editor, e.g. the third-party library uses a class "row".

Is there any recommended way around it? Perhaps I'm missing some kind of an obvious solution to this? Thank you for any help and for creating an awesome editor!

tomichal · Accepted Answer

I looked inside the https://github.com/artf/grapesjs-blocks-basic plugin and it looks like the problem I'm experiencing is coming from there, namely the plugin does not use the grapesjs editor's stylePrefix config setting, despite initially fetching it from the editor here: https://github.com/artf/grapesjs-blocks-basic/blob/22d7799d7ecfccd55da67035acb797c8e7f86ccd/src/index.js#L4

After getting the stylePrefix from the editor the plugin proceeds to hard code CSS class names, e.g. .row, which is one of the, or maybe the only, class conflicting with the external library styles I'm trying to use in the editor (https://vmware.github.io/clarity/).

artf · Answer

Hi @tomichal seems like you get exactly where is the issue. I close this in favor of https://github.com/artf/grapesjs-blocks-basic/issues/2

lock[bot] · Answer

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Third-party library styles collision

Question

Answers (3)

Related Questions and Answers

GrapeJs framework breaks on adding external stylesheet

[QUESTIONS] Change canvas style

[QUESTION] How to load external CSS file into Grapes Editor?

[Question]Adding Google Font doesn't work

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories