How to add !important in all the generated apis

I may have found a solution for your problem. Please check https://github.com/artf/grapesjs/issues/1041#issuecomment-382545102

I don't think you need to add !important because your element with the class .banner-title gets a unique class added holding the property that has changed.

So if you change the color, a new class is added with color: #your-color and thus the color defined in .banner-title is overwritten.

@NicoEngler , Thank you for your valuable response. But thing is that i am loading one default template page with default css. In this css we have css like

.banner-title {
    background-color: #e6d8d8;
    border: 3px #acbe5a #b83dd3;
    color: #f80000 !important;
}

Now when i am changing the color to #000 using editor then the new css will be created like,

.banner-title {
    color: #000;
}

But thing is that default css have already !important so it will take the default template's css not the new one.

So, that's why i'm adding !important to new generated css by editor.

Let me know if you didn't got my point i can understand with more description.