Applying custom class to component doesn't seem to be working
I also tried editor.CssComposer.setRule('.nolink', {'background-color':'red'}); but that didn't seem to work either setRule is the right API to use and it works, but it creates only the rule, you have also to add the class to the component if you want to see it in canvas (eg. editor.getSelected().addClass('nolink'))
Read full answer below ↓Question
I'm adding a class on a component when certain conditions aren't met, in this case when there's no href set. I viewed the source and see the "nolink" class in the source but it's not setting the background color to red and I'm not seeing it when inspecting the element, this is how I'm trying to add it, but when I do cc.getAll() I'm not seeing the nolink class so I'm not sure where things are breaking down
var cc = editor.CssComposer;
var nolink = editor.SelectorManager.add('nolink');
var rule = editor.CssComposer.add([nolink]);
rule.set('style', { 'background-color': 'red' });
I also tried editor.CssComposer.setRule('.nolink', {'background-color':'red'}); but that didn't seem to work either
Answers (2)
I also tried editor.CssComposer.setRule('.nolink', {'background-color':'red'}); but that didn't seem to work either
setRule is the right API to use and it works, but it creates only the rule, you have also to add the class to the component if you want to see it in canvas (eg. editor.getSelected().addClass('nolink'))
Thanks for reporting this, @rcloss.
Thanks for sharing your report about applying custom class to component doesn't seem to be working. To help the team investigate and prioritize this:
Please provide:
- A minimal reproducible example (CodeSandbox/JSFiddle)
- Your GrapesJS version number
- Browser and OS information
- Any error messages from the browser console
- Steps to reproduce the issue
What helps most:
- Minimal code example (not your full project)
- Screen recording or screenshot showing the issue
- Expected vs actual behavior clearly stated
- GrapesJS configuration you're using
With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3559
page.getMainComponent().view gives undefined when page is selected
Hello @artf, I want to get the HTML Element of selected page. But it returns undefined when using following code:
Issue #3309
TextNodes interfere when changing content on element
Version: 0.16.44 Hi @artf I have a custom block with a custom button component, which its content is similar to this one. <a data-gjs-type=...
Issue #3219
Add Type for block and css with class name
Hi @artf I am stuck on one thing I want to add one block in which I want to add style with the class name also Here is my code -: This give...
Issue #3122
Missing media style on the duplicated component
Version: 0.16.27 Summary: Missing media style on the duplicated component Steps to reproduce: Try to change something on Tablet or Mobile D...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.