How do I add my classes CSS file when using components?

Question

I have this component: editor.BlockManager.add('rodape', { label: '3 Colunas', content: { tagName: 'div', draggable: true, attributes: { class: 'row' }, style: { 'display': 'flex', 'justify-content': 'flex-start', 'align-items': 'stretch', 'flex-wrap': 'nowrap', 'padding': '10px', }, content: 'lala' } }); I want to use the class ROW but where do I define this class? When I drag this component block inside the canvas the CSS of the class is not even loaded.

RJCAM · Accepted Answer

Hi, @Leozinho0 You can do it like this:

RJCAM · Answer

Actually, the code I give to you works, to see what I mean, try this:Drop custom created component into canvas, as you said it won't load the css ".row" styleNow drop any column block inside the canvas, and now you see the ".row" css is loaded. This is because the styles are inside the block itself and they are only rendered when you drop the column block into the canvas. You can check printing this in the console that the html and css of the component are made like the code I give to you in my...

Leozinho0 · Answer

Hi. Thank you for answering. It doesn't work.

If you check https://grapesjs.com/demo.html when you add a component (Ex.: 3 columns) and click to export the html you will see that it loads the .row and .cell classes.

How do I add my classes CSS file when using components?

Question

Answers (3)

Related Questions and Answers

Insert element or block inside parent element

How I Get ID From Block?

How to editable in innerHTML

Not getting the Script of Block from editor.getComponents()

Paid Plugins That Match This Issue

Related tutorials

Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)

Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor

GrapesJS DevTools: A Developer Panel Inside Your Editor

Browse Plugin Categories