Add new class programatically

Hello Artf,

I want to edit the styles of components (mostly imported html) without modifying all components with the same class. I tried to add a random named class programmatically like this: ` this.editor.on(‘component:selected’, function(model) { if (model && model.length > 2) { const uuid = this.s4(); // generate new random class name

            const selector =  {
                name: uuid,
                type: 'class',
                label: uuid,
            };

            model[1].attributes.classes.push(selectorManager.get(uuid));
 let mClasees = model[1].attributes.classes;
         const uuid = this.s4();
         const selector =  {
             name: uuid,
             type: 'class',
             label: uuid,
         };
      mClasees.push(selector);

}.bind(this)); `

This add a class programmatically to the component but it seem to no let me edit it’s style.

I just want be able to change the style of a single component without having to care which class it belongs to. Event if I copy past a component, I want be able to edit each components individually. I hope that clear. If you need any further information, don’t hesitate to ask me 😃 Thanks your help!

[artf]

@wemod123 editor.getWrapper().addClass('my-class')

[artf]

@IrinaCodixis from the https://github.com/artf/grapesjs/releases/tag/v0.14.52 we’ve added setRule/getRule methods, so to add some CSS rule programatically you should do this:

editor.CssComposer.setRule('.some-class', { color: 'red' })

// Remove
const rule = editor.CssComposer.getRule('.some-class');
editor.CssComposer.getAll().remove(rule);