Estoy usando Angular v12 y Angular Material y me pregunto si es posible encapsular el CSS global que emite Angular Material.

Tengo un archivo theme.scss con el siguiente contenido.

 @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'); }

El estilo que proviene de mat.core junto con mat.core-theme y mat.button-theme está encapsulado en la clase my-dark-theme .

Sin embargo, para usar material angular, debemos agregar @use '~@angular/material' as mat; al principio del archivo, lo que creará algunas clases CSS globales que no están encapsuladas.

¿Hay alguna forma de encapsular estas clases CSS globales?