How can I update the styles of a class?
To get the rule with that class use CssComposer.getRule and once you have the rule update its style
Read full answer below ↓Question
Hi, so I have this button, whose style changes when hovered, a new class is added:
<button class="btn btn_hovered">Button 1</button>
<button class="btn">Button 2</button>
Is there a way I can change the styles of a particular class? If I wanted to add a custom color to the "btn_hovered" class? Any help appreciated, thanks.
Answers (3)
To get the rule with that class use CssComposer.getRule and once you have the rule update its style
const rule = editor.CssComposer.getRule('.btn_hovered');
rule && rule.addStyle({ color: 'red' });
@artf Hi, I am trying to access with that statement, but I get null as a response, what could be the issue?
Well, the rule should be there at first. If you're using canvas.styles option in your init method those are not appended inside CssComposer, so you have to add it first.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2300
[QUESTIONS] How to change order of categories?
I saw the changes done by @JuanTincho of adding the "Order" attibute but I was able of adding it only on new categories created. I started...
Issue #2164
[QUESTION] How to overwrite classes manager?
Hi @artf , Is there a way to modify the attribute where the classes are placed? (default: class) is there also a way to change the position...
Issue #2586
[Question]: How update style manager panel using few devices and custom css class
There is a custom class added to simple grapesjs project: If there is no devices and user adds the class into the selectors field Settings...
Issue #3389
MultiSelect some elements and change styles only work on the last selected element
Hi, when I MultiSelect some elements using shift, and change style in styleManager. Only the last clicked element will update the style. Ca...
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.