Updating a trait resets the component styles
@msantore you are using `setStyle` which will override the previous styles. use it like below: cheers!
Read full answer below ↓Question
I'm having an issue with Traits, wondering if this may be a bug. When I update the fontColor or fontSize trait, the other traits reset.
Video: https://www.loom.com/share/6a40830699ad4c4590363f2641a07eac
Code: https://github.com/msantore/vue-builder/blob/master/src/plugins/materials/components/index.js#L362
GrapesJS Version: 0.15.9
Answers (3)
@msantore you are using setStyle which will override the previous styles. use it like below:
link[0].setStyle({ ...link[0].getStyle(), color: `${value}` });
cheers!
That fixed it, thanks!
You can also use addStyle({ color: ${value} }) which does the same thing
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5141
component resets attribute values on updating traits ( first time only )
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 113.0.5672.63 Reproducible...
Issue #5441
No id for elements not having styles but with `script`, which results in script not running for those elements
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome latestReproducible demo link https://...
Issue #3052
BUG: hide/show traits and change their values dynamically
I have extended the link component and add new traits like href. In order to show or hide the trait i followed this #https://github.com/art...
Issue #3404
Style Manager Issue.
Hi @artf I want to hide and show style properties for specific component. After referencing this issue https://github.com/artf/grapesjs/iss...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.