Styles from loaded project data are overridden by component default styles

[manuelbostanci]

I have a custom component with following default styles applied:

model: {
   ...
   styles: '.test-class { margin-top: 20px; }',
   ...
}

When I drag&drop this component into the canvas, the margin-top is shown in the Styles Manager and the class .test-class is applied. When I now change any css property via the Styles Manager (e.g. background-color: #000000), the test-class definition contains both styles (margin-top and background-color) which is also reflected in the project data that will be persisted remotely

When I now reload the page, the project data (containing both css definitions) will be loaded successfully but the component does only have the default style (margin-top) applied instead of margin-top AND background-color.
It looks like the loaded styles are overridden by the components default styles.

Is this intended behavior?

[artf]

Yes, it's intended behavior as you're updating the class rule itself.
Probably you need to enable component-first selectors for your use case
https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors

[manuelbostanci]

Thanks for the quick reply!