search

scttcper / ngx-codemirror

Codemirror Wrapper for Angular
https://ngx-codemirror.vercel.app
MIT License
282 stars 47 forks source link

Component style is not taken #256

Closed shaozi closed 4 years ago

shaozi commented 4 years ago

Hi,

I just installed ngx-codemirror in a Angular 9 app. I found I cannot change the style in a component level sass file. My app.component.sass file contains this code:

.CodeMirror
   height: 600px
   border-radius: 20px

But the code mirror does not have any of these styles.

If I put the same code in styles.sass, it works.

aboyobam commented 4 years ago

use ng-deep for styling the subcomponents like

::ng-deep {
    .CodeMirror {
        // style here
    }
}
shaozi commented 4 years ago

but ::ng-deep is deprecated: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

zakhenry commented 4 years ago

::ng-deep is marked as deprecated true, however without a viable replacement it is the de-facto way to do encapsulated dom piercing.

Remember to always do :host ::ng-deep to ensure the style is only applied to descendants of the component, not global.

My suspicion is that Angular will replace the unsafe-if-misused ::ng-deep with a new ::ng-host-deep