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?
- Open the page and load the GrapesJS editor
- Select the Row component and delete it
- 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:
- The first added Row component displays styles correctly
- After deletion and re-addition, the Row component styles are lost
- The class attribute exists in the DOM but the CSS rules are not injected
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (3)
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.
@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.
@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.
Issue #6527
BUG: Malformed inline styles causing editor freeze
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 138.0.4 Reproducible demo link htt...
Issue #6180
BUG: Trait's `setValue()` method not called when value changes
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome latest Reproducible demo link https...
Issue #6683
BUG: Modals close on mouseup event outside of modal rather than a full click
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 143.0.7499.169 Reproducible demo li...
Issue #4370
BUG: LayerManager becomes unresponsive after StorageManager.load()
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 102Reproducible demo link https://cod...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.