Drag a component twice to enter the editor, and the style is repeated twice by useing editor.addStyle()

[momu-2016]

I saved the style of the component and style to the database,when I drag the block(components are included in the block) to the editor,I call editor.addStyle(component-style) to add style to editor.It did work.
But when a component exists in editor and I drag the same component into the editor again, I call editor.addStyle(component-style) again,the style is completely duplicate.

Eager for help

[Ju99ernaut]

What does component-style look like? Maybe try simplifying the selectors in component-style if possible.

[momu-2016]

What does component-style look like? Maybe try simplifying the selectors in component-style if possible.

Thank you for your attention!

I get component_style by
let component_style = JSON.stringify(editor.CodeManager.getCode(component, "css", { json: true }));
just like
[{ "selectors": [], "selectorsAdd": ".GSMMeAfiuB .content", "style": { "position": "relative", "width": "73.125rem", "margin": "0 auto", "padding-bottom": "3.125rem", "overflow": "hidden" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .header_top", "style": { "display": "flex", "justify-content": "space-between" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .content .header", "style": { "padding": "5rem 0 3.125rem 0", "width": "18.75rem" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .content .header p.title", "style": { "color": "#444", "font-size": "1.25rem" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .content .header p", "style": { "text-align": "left" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .content .header p.subtitle", "style": { "color": "#c1c1c1", "font-size": "1rem" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .pro_tab_list", "style": { "display": "block", "text-align": "right", "margin-top": "5.625rem" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .pro_tab_list a", "style": { "font-size": "0.875rem", "margin": "0 1rem", "line-height": "1rem", "color": "#616161", "display": "inline-block", "transition": "all 0.3s ease-out 0s" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .pro_tab_list a:last-child", "style": { "margin-right": "0" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectlist", "style": { "width": "100%", "margin": "0 auto", "text-align": "center", "margin-bottom": "1.25rem" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectlist .pro_content_list", "style": { "display": "flex", "justify-content": "space-between", "flex-wrap": "wrap" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectlist .projectitem", "style": { "width": "32.33%", "margin": "0 1% 1.5625rem 0", "height": "fit-content", "background": "none", "position": "relative" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectitem:nth-child(3n)", "style": { "margin-right": "0" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectlist .projectitem a img", "style": { "height": "auto", "overflow": "hidden", "float": "none", "width": "100%", "transition": "all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info", "style": { "width": "100%", "height": "auto", "background": "rgba(0, 0, 0, 0)", "position": "relative", "left": "0", "top": "0", "transition": "all ease-out .3s" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .words", "style": { "height": "5.0625rem", "transition": "all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s", "position": "relative", "bottom": "0", "top": "auto", "width": "100%", "background": "#fff", "margin-top": "-0.9375rem" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .words::before", "style": { "content": "''", "position": "absolute", "width": "100%", "height": "90%", "border-bottom": "1px solid rgba(0, 0, 0, .1)", "left": "0" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .title", "style": { "font-size": "0.9375rem", "color": "#666", "overflow": "hidden", "white-space": "nowrap", "text-overflow": "ellipsis", "line-height": "1.5rem", "margin": "0", "padding": "0.9375rem 1.875rem 0 1.25rem" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info p", "style": { "width": "auto", "text-align": "left" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .subtitle", "style": { "color": "#b7b7b7", "display": "block", "height": "1.25rem", "line-height": "1.5rem", "overflow": "hidden", "margin": "0", "padding": "0 1.25rem" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info p.subtitle", "style": { "font-size": "0.75rem", "transition": "all ease-out .3s" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .words:after", "style": { "content": "''", "width": "2.3125rem", "height": "1.25rem", "display": "block", "position": "absolute", "top": "50%", "right": "0.125rem", "background": "transparent url(http://img.momucloud.com/modules/MRPHQ8B5/icon.png) no-repeat -1.875rem -4.125rem", "background-size": "12.5rem auto", "transition": "all 0.3s ease-out 0s", "margin-top": "-0.6875rem", "border-left": "1px solid rgba(0, 0, 0, .0)" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .pro_tab_list a.active, .GSMMeAfiuB .pro_tab_list a:hover", "style": { "color": "var(--main-color)" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectlist .projectitem:hover a .project_info .words::before", "style": { "border-bottom": "1px solid rgba(0, 0, 0, .4)" } }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .dHome .projectlist .projectitem:hover a .project_info .words:after", "style": { "background": "url(http://img.momucloud.com/modules/MRPHQ8B5/icon.png) no-repeat 1rem -4.125rem", "background-size": "12.5rem auto", "border-left": "1px solid rgba(0, 0, 0, .1)" } }, { "selectors": [], "selectorsAdd": ".jarvis_icon svg", "style": { "width": "100%", "height": "100%" } }, { "selectors": [{ "name": "subtitle", "label": "subtitle", "type": 1, "active": true, "private": false, "protected": false }], "style": { "font-size": "12px", "font-family": "Microsoft YaHei", "color": "#b7b7b7" } }, { "selectors": [{ "name": "s0i5s", "label": "s0i5s", "type": 1, "active": true, "private": false, "protected": false }, { "name": "active", "label": "active", "type": 1, "active": true, "private": false, "protected": false }], "style": { "color": "var(--main-color)" } }, { "selectors": [{ "name": "jarvis-cell", "label": "jarvis-cell", "type": 1, "active": true, "private": 1, "protected": false }], "style": { "background-color": "#e8eaed", "color": "#000", "font-size": "16px", "height": "auto", "display": "flex", "align-items": "flex-start", "justify-content": "flex-start", "min-height": "120px", "border-radius": "3px", "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis", "content": "\"单元格\"", "width": "100%", "min-width": "120px", "margin": "5px", "flex-basis": "40%", "flex-grow": "1", "flex-shrink": "1" } }, { "selectors": [{ "name": "section-container", "label": "section-container", "type": 1, "active": true, "private": false, "protected": false }], "style": { "background-color": "#e8eaed", "color": "#000", "font-size": "16px", "height": "auto", "display": "flex", "align-items": "flex-start", "justify-content": "flex-start", "min-height": "120px", "border-radius": "3px", "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis", "content": "\"单元格\"", "width": "100%", "min-width": "120px", "margin": "5px", "flex-basis": "40%", "flex-grow": "1", "flex-shrink": "1" } }, { "selectors": [{ "name": "content", "label": "content", "type": 1, "active": true, "private": false, "protected": false }], "style": { "display": "flex", "flex-direction": "column", "width": "62.5%", "margin": "auto auto auto auto", "border": "none rgb(18, 18, 18)", "flex": "0 0", "align-items": "stretch" } }, { "selectors": [{ "name": "header_top", "label": "header_top", "type": 1, "active": true, "private": false, "protected": false }], "style": { "display": "flex", "justify-content": "space-between", "align-items": "center", "height": "80px" } }, { "selectors": [{ "name": "sgi8g", "label": "sgi8g", "type": 1, "active": true, "private": false, "protected": false }], "style": { "font-family": "Microsoft YaHei", "font-size": "18px", "color": "#444" } }, { "selectors": [{ "name": "ztsm5", "label": "ztsm5", "type": 1, "active": true, "private": false, "protected": false }], "style": { "font-family": "Microsoft YaHei", "font-size": "12px", "color": "#c1c1c1", "line-height": "20px" } }, { "selectors": [{ "name": "s0i5s", "label": "s0i5s", "type": 1, "active": true, "private": false, "protected": false }], "style": { "font-family": "Microsoft YaHei", "font-size": "12px", "color": "#616161", "padding": "0 10px 0 10px" } }, { "selectors": [{ "name": "s0i5s", "label": "s0i5s", "type": 1, "active": true, "private": false, "protected": false }, { "name": "active", "label": "active", "type": 1, "active": true, "private": false, "protected": false }], "style": { "color": "var(--main-color)" } }, { "selectors": [{ "name": "s0i5s", "label": "s0i5s", "type": 1, "active": true, "private": false, "protected": false }], "style": { "color": "var(--main-color)" }, "state": "hover" }, { "selectors": [{ "name": "projectlist", "label": "projectlist", "type": 1, "active": true, "private": false, "protected": false }], "style": { "display": "flex", "flex-wrap": "wrap", "justify-content": "space-between" } }, { "selectors": [{ "name": "projectitem", "label": "projectitem", "type": 1, "active": true, "private": false, "protected": false }], "style": { "top": "auto", "right": "auto", "left": "auto", "bottom": "auto", "width": "32%", "margin": "0 0 20px 0", "--border-type": "bottom", "border-bottom": "1px solid rgba(0,0,0,0.1)", "flex": "0 0 32.5%" } }, { "selectors": [{ "name": "project_img", "label": "project_img", "type": 1, "active": true, "private": false, "protected": false }], "style": { "overflow": "hidden" } }, { "selectors": [], "selectorsAdd": ".project_img:hover img", "style": { "transform": "scale(1.08, 1.08)" } }, { "selectors": [{ "name": "so7y3", "label": "so7y3", "type": 1, "active": true, "private": false, "protected": false }], "style": { "width": "100%", "transition": "all 0.6s ease" } }, { "selectors": [{ "name": "project_info", "label": "project_info", "type": 1, "active": true, "private": false, "protected": false }], "style": { "display": "flex", "justify-content": "space-between", "align-items": "center" } }, { "selectors": [{ "name": "b5pct", "label": "b5pct", "type": 1, "active": true, "private": false, "protected": false }], "style": { "font-family": "Microsoft YaHei", "font-size": "12px", "color": "#bcbcbc", "line-height": "22px" } }, { "selectors": [{ "name": "jarvis_icon", "label": "jarvis_icon", "type": 1, "active": true, "private": 1, "protected": false }], "style": { "display": "inline-block", "text-decoration": "none", "vertical-align": "middle", "color": "inherit", "fill": "currentColor", "width": "64px", "height": "64px" } }, { "selectors": [{ "name": "arrow", "label": "arrow", "type": 1, "active": true, "private": false, "protected": false }], "style": { "width": "18px", "opacity": "0.24" } }, { "selectors": [{ "name": "jarvis-row", "label": "jarvis-row", "type": 1, "active": true, "private": 1, "protected": false }], "style": { "display": "flex", "justify-content": "flex-start", "align-items": "stretch", "flex-wrap": "nowrap", "margin": "auto", "padding": "0", "width": "100%", "min-height": "75px" } }, { "selectors": [{ "name": "smart-button4", "label": "smart-button4", "type": 1, "active": true, "private": false, "protected": false }], "style": { "width": "220px", "display": "inline-block", "border": "1px solid #dddddd", "line-height": "40px", "margin": "0 0 0 0", "color": "#181818", "transition": "border-color 0.4s ease 0s, background-color 0.4s ease 0s" } }, { "selectors": [{ "name": "smart-button4", "label": "smart-button4", "type": 1, "active": true, "private": false, "protected": false }], "style": { "color": "#fff", "background-color": "var(--main-color)", "border-color": "rgba(50, 50, 50, 1)", "border": "1px solid var(--main-color)" }, "state": "hover" }, { "selectors": [{ "name": "iuaik", "label": "iuaik", "type": 2, "active": true, "private": false, "protected": false }], "style": { "justify-content": "center", "align-items": "center" } }, { "selectors": [{ "name": "content", "label": "content", "type": 1, "active": true, "private": false, "protected": false }], "style": { "width": "100%" }, "mediaText": "(max-width: 992px)" }, { "selectors": [{ "name": "projectitem", "label": "projectitem", "type": 1, "active": true, "private": false, "protected": false }], "style": { "flex": "0 0 49%" }, "mediaText": "(max-width: 992px)" }, { "selectors": [{ "name": "content", "label": "content", "type": 1, "active": true, "private": false, "protected": false }], "style": { "width": "100%" }, "mediaText": "(max-width: 992px)", "atRuleType": "media" }, { "selectors": [{ "name": "projectitem", "label": "projectitem", "type": 1, "active": true, "private": false, "protected": false }], "style": { "flex": "0 0 49%" }, "mediaText": "(max-width: 992px)", "atRuleType": "media" }, { "selectors": [{ "name": "jarvis-cell", "label": "jarvis-cell", "type": 1, "active": true, "private": 1, "protected": false }], "style": { "flex-basis": "100% !important" }, "mediaText": "(max-width: 768px)", "atRuleType": "media" }, { "selectors": [{ "name": "jarvis-row", "label": "jarvis-row", "type": 1, "active": true, "private": 1, "protected": false }], "style": { "flex-wrap": "wrap" }, "mediaText": "(max-width: 768px)", "atRuleType": "media" }, { "selectors": [{ "name": "header_top", "label": "header_top", "type": 1, "active": true, "private": false, "protected": false }], "style": { "flex-direction": "column" }, "mediaText": "(max-width: 480px)" }, { "selectors": [{ "name": "header_top", "label": "header_top", "type": 1, "active": true, "private": false, "protected": false }], "style": { "justify-content": "center" }, "mediaText": "(max-width: 480px)" }, { "selectors": [{ "name": "header", "label": "header", "type": 1, "active": true, "private": false, "protected": false }], "style": { "margin": "auto auto 10px auto" }, "mediaText": "(max-width: 480px)" }, { "selectors": [{ "name": "pro_tab_list", "label": "pro_tab_list", "type": 1, "active": true, "private": false, "protected": false }], "style": { "margin": "auto auto 15px auto" }, "mediaText": "(max-width: 480px)" }, { "selectors": [{ "name": "arrow", "label": "arrow", "type": 1, "active": true, "private": false, "protected": false }], "style": { "display": "none" }, "mediaText": "(max-width: 480px)" }, { "selectors": [{ "name": "project_info", "label": "project_info", "type": 1, "active": true, "private": false, "protected": false }], "style": { "justify-content": "center" }, "mediaText": "(max-width: 480px)" }, { "selectors": [{ "name": "subtitle", "label": "subtitle", "type": 1, "active": true, "private": false, "protected": false }], "style": { "text-align": "center" }, "mediaText": "(max-width: 480px)" }, { "selectors": [{ "name": "qu7e6", "label": "qu7e6", "type": 1, "active": true, "private": false, "protected": false }], "style": { "text-align": "center" }, "mediaText": "(max-width: 480px)" }, { "selectors": [{ "name": "header_top", "label": "header_top", "type": 1, "active": true, "private": false, "protected": false }], "style": { "flex-direction": "column" }, "mediaText": "(max-width: 480px)", "atRuleType": "media" }, { "selectors": [{ "name": "header_top", "label": "header_top", "type": 1, "active": true, "private": false, "protected": false }], "style": { "justify-content": "center" }, "mediaText": "(max-width: 480px)", "atRuleType": "media" }, { "selectors": [{ "name": "header", "label": "header", "type": 1, "active": true, "private": false, "protected": false }], "style": { "margin": "auto auto 10px auto" }, "mediaText": "(max-width: 480px)", "atRuleType": "media" }, { "selectors": [{ "name": "pro_tab_list", "label": "pro_tab_list", "type": 1, "active": true, "private": false, "protected": false }], "style": { "margin": "auto auto 15px auto" }, "mediaText": "(max-width: 480px)", "atRuleType": "media" }, { "selectors": [{ "name": "project_info", "label": "project_info", "type": 1, "active": true, "private": false, "protected": false }], "style": { "justify-content": "center", "padding": "10px 0 5px 0" }, "mediaText": "(max-width: 480px)", "atRuleType": "media" }, { "selectors": [{ "name": "qu7e6", "label": "qu7e6", "type": 1, "active": true, "private": false, "protected": false }], "style": { "text-align": "center" }, "mediaText": "(max-width: 480px)", "atRuleType": "media" }, { "selectors": [{ "name": "arrow", "label": "arrow", "type": 1, "active": true, "private": false, "protected": false }], "style": { "display": "none" }, "mediaText": "(max-width: 480px)", "atRuleType": "media" }, { "selectors": [{ "name": "GSMMeAfiuB", "label": "GSMMeAfiuB", "type": 1, "active": true, "private": false, "protected": false }], "style": { "background-color": "#fff", "margin-bottom": "2.8125rem", "position": "relative" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .content", "style": { "width": "100%", "padding-bottom": "0" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .content .header", "style": { "padding": "2.1875rem 0 1.875rem 0", "width": "100%", "float": "none" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .content .header p.title", "style": { "font-size": "1rem", "text-align": "center" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .content .header p.subtitle", "style": { "font-size": ".75rem", "text-align": "center" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .pro_tab_list", "style": { "display": "none" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectlist", "style": { "width": "100%", "margin": "0 auto", "text-align": "center" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectlist .projectitem", "style": { "padding-bottom": "0", "width": "49%", "margin": "0 1% 2% 0", "background-color": "#fff", "height": "auto", "float": "left", "position": "relative" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectlist .projectitem:nth-child(2n)", "style": { "margin-right": "0" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectitem a", "style": { "display": "block", "overflow": "hidden" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .words", "style": { "height": "3.125rem" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info", "style": { "top": "0.75rem" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .words::before", "style": { "content": "none" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .title", "style": { "margin-top": "0.625rem", "color": "#565656", "font-size": ".75rem", "margin-left": "0", "line-height": "0.75rem", "padding": "0", "text-align": "center" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .subtitle", "style": { "color": "#7E7E7E", "font-size": "0.8rem", "padding": "0", "text-align": "center" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .project_info .words:after", "style": { "content": "none" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }, { "selectors": [], "selectorsAdd": ".GSMMeAfiuB .projectmore", "style": { "display": "block", "color": "#fff", "background": "#4E4E4E", "width": "60%", "height": "2.5rem", "line-height": "2.5rem", "margin": "0 auto", "margin-top": "2.1875rem", "text-align": "center", "font-size": ".75rem", "text-indent": "0", "position": "relative", "z-index": "1" }, "mediaText": "(max-width: 64rem)", "atRuleType": "media" }]

[Ju99ernaut]

Grapesjs has issues with removing some selectors, for example those with tag names.

[artf]

@momu-2016 please check my comment here

[momu-2016]

@momu-2016 please check my comment here
Thank you so much!