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!
Answers (3)
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/).
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
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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1807
GrapeJs framework breaks on adding external stylesheet
When i add my external stylesheet using the grapesjs framework no more works. How can I have the style sheet as well as the grapesjs framew...
Issue #859
[QUESTIONS] Change canvas style
Hi there, I have some question about canvas style, in this case i have config like this. By default i use css with name builder-desktop.css...
Issue #966
[QUESTION] How to load external CSS file into Grapes Editor?
Hey, During my editor = grapesjs.init(), I want to load an external CSS file into the canvas using @import url(...). So when I use my custo...
Issue #1215
[Question]Adding Google Font doesn't work
Bonjour, I try to add Google Font : When i click on Typography, script stop in Grapes.jp show: function show() { this.$el.addClass(this.pfx...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.