Issue #2039💬 AnsweredOpened May 27, 2019by faaizalikhan10 reactions

How can I update the styles of a class?

Quick answerby artf

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)

artfMay 30, 2019

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' });
faaizalikhan1June 4, 2019

@artf Hi, I am trying to access with that statement, but I get null as a response, what could be the issue?

artfJune 4, 2019

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.