Блог

Я использую Angular v12 и Угловой материал, и мне интересно, можно ли инкапсулировать глобальный CSS, излучаемый угловым материалом.

У меня есть theme.scss файл со следующим содержанием.

 @use '~@angular/material' as mat;  .my-dark-theme {  $colors: (  background: #212022,  );   $typography: mat.define-typography-config(  $font-family: 'Roboto, sans-serif',  $headline: mat.define-typography-level(20px, 27px, 700),  $title: mat.define-typography-level(18px, 25px, 700),  $subheading-2: mat.define-typography-level(16px, 23px, 700),  );     @include mat.core($typography);   $dark-theme: mat.define-dark-theme(  (  typography: $typography,  color: (  primary: mat.define-palette(mat.$indigo-palette, 500),  accent: mat.define-palette(mat.$pink-palette, A200, A100, A400),  )  )  );   @include mat.core-theme($dark-theme);  @include mat.button-theme($dark-theme);   background-color: map-get($colors, 'background'); }  

Стиль, который исходит mat.core вместе с mat.core-theme классом и mat.button-theme инкапсулирован в my-dark-theme нем.

Однако для использования углового материала нам нужно добавить @use '~@angular/material' as mat; в начале файла, что создаст некоторые глобальные классы CSS, которые не инкапсулированы.

Есть ли способ инкапсулировать эти глобальные классы CSS?