How to load externel css inside the canvas and apply changes on class instead of ID?

[Turzapodder]

Here I am again,
Continuously asking for help but no one helps at all (lol). but funny things is after i post here I can somehow figure out the solution for the problems i face.

Okay, I want to load external css form a strings or stylesheets. I know we can use:
Canvas: { styles: [<link to the stylesheet/>] }
but using this method the css doesn't load inside the css editor (editor.getCss()) or it doesn't reflect on the stylemanager. So, is there any other way to include them while rendering the editor?

and another thing is grapesjs applies styles using the component ID(even it has existing class), is there any way to make sure the styles changes are apply on classes?

[artf]

If you need it in the export, you just need to include/append your <style> as part of the document.

[Turzapodder]

So if I include the styles in my document, will it be reflected on style manager? actually, implemented a template system so basically html and css are externally loaded into the editor using those pre-coded trmplates. But css values are not present inside style manager and export code preview both. So, is there any proper way to do that?