Issue #6685Opened January 12, 2026by shery0 reactions

BUG: Custom component styles are not applied after deletion and re-addition

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v143.0.7499.193

Reproducible demo link

https://codesandbox.io/p/sandbox/2l3887

Describe the bug

How to reproduce the bug?

  1. Open the page and load the GrapesJS editor
  2. Select the Row component and delete it
  3. Click the Row component in the left sidebar to add a Row to the canvas

What is the expected behavior? The newly added Row component should display correct styles (white background, border, border-radius, padding, etc.)

What is the current behavior? After re-adding the Row component, the .gjs-row CSS class defined in the styles property is not applied to the DOM element, resulting in missing styles and the component displaying as an unstyled plain text container

If is necessary to execute some code in order to reproduce the bug, paste it here below:

// Row component definition
editor.Components.addType('row', {
  model: {
    defaults: {
      name: 'Row',
      tagName: 'div',
      draggable: true,
      droppable: true,
      attributes: { class: 'gjs-row' },
      styles: `
        .gjs-row {
          display: flex;
          flex-wrap: wrap;
          gap: 16px;
          padding: 16px;
          background-color: #fff;
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          margin-bottom: 16px;
        }
      `,
      components: [
        { type: 'column' },
        { type: 'column' },
        { type: 'column' }
      ]
    }
  }
});

Symptoms:

  1. The first added Row component displays styles correctly
  2. After deletion and re-addition, the Row component styles are lost
  3. The class attribute exists in the DOM but the CSS rules are not injected
<img width="1886" height="875" alt="Image" src="https://github.com/user-attachments/assets/2a09f090-fbd8-41e1-a29d-7e0b90072e7b" /> <img width="1245" height="377" alt="Image" src="https://github.com/user-attachments/assets/98db4307-ef2a-4547-ae90-409f6640e060" /> <img width="1873" height="762" alt="Image" src="https://github.com/user-attachments/assets/dee28083-6cda-4ad6-b3f1-4cac2aa43533" />

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (3)

mdmontesinosFebruary 17, 20260 reactions

I'm facing a similar issue, where the re-added component has the correct styles property:

<img width="1112" height="17" alt="Image" src="https://github.com/user-attachments/assets/474011c4-b1be-48df-9aa8-14c3dcdfc68d" />

But if I use the "View Code" button, the CSS was not injected, in my case they aren't even in the DOM. The component itself works, because when it was first added, the styles were in fact injected and working ok. It's only after removing and re-adding that it fails.

I've also tested using the "component.replaceWith(newComponent)" function instead of "component.remove()" and "editor.addComponents(newComponent)".

Code example:

//Component Definition
domComponents.addType('my-type', {
    model: {
        defaults: {
            tagName: 'div',
            name: 'My Type',
            attributes: { 'data-gjs-type': 'my-type' },
        }
    }
});

//Adding component (here the styles work)
editorInstance.Components.addComponent({
    type: 'my-type',
    attributes: { id: 'my-id' },
    components: //several text and image components,
    styles: '#my-id #ir2o {\n  padding: 5px;\n  left: 94px;\n  top: 120px;\n  position: absolute;\n}\n\n ....'
}, { at: 0 });

//Retrieving the component in another operation
let myComponent = editorInstance.Components.getComponents().find((component: Component) => component.getType() === 'my-type');

//Replacing it (or removing and re-adding) with an updated one
myComponent.replaceWith({
    type: 'my-type',
    attributes: { id: 'my-id' },
    components: //Updated several text and image components,
    styles: '#my-id #ir2o {\n  padding: 5px;\n  left: 94px;\n  top: 140px;\n  position: absolute;\n}\n\n ....' //Updated styles
});

//The components are successfully added but the updated styles are not injected.
artfFebruary 18, 20260 reactions

@mdmontesinos your usage is not correct, styles has to be defined at the component definition, and it's not expected to change. Also, it's wrong to use IDs for component definition if the component is expected to be reused, the ID will be recreated, rely on classes, especially for styles.

But the report from @shery seems to be legit; there might be an issue with the caching of styles.

mdmontesinosFebruary 18, 20260 reactions

@artf I'm using an ID because there will always be a single instance of that component in my project. My use case is that a component is designed externally to be used as a "background" and then imported into projects that use it. Therefore, when the external component is updated, I need to also update it in my project, which is why I'm trying to recreate it, and it might have its components or styles modified. Is there any way that I can force the styles to be refreshed?

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.