How to make the component styles to !Important

[RakulAgn]

I am working on a project where I have created a component and saved the project data, including HTML and CSS. For instance, I have a button in my component with specific styles, referenced by the button's ID. I am rendering my component on another site using a CDN. However, the issue arises when the site's existing styles for the button tag override my component's button styles. I am looking for a solution to prevent this. One option might be to add !important to all my styles, but I am also open to other methods to ensure that these styles are applied only to my components.

[RakulAgn]

@artf

[mosh-tudor]

@RakulAgn

!important is evil.

Try @layer :

@layer default, editor;

@layer default {
  ... your styles ...
}

@layer editor {
  ... your grapesjs styles ...
}

[RakulAgn]

It is in Inline Style Format