I'm using Angular v12 and Angular Material and I'm wondering if it's possible to encapsulate the global CSS that is emitted by Angular Material.

I have a theme.scss file with the following content.

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

The style that comes from mat.core along with mat.core-theme and mat.button-theme is encapsulated in my-dark-theme class.

However to use Angular material we need to add @use '~@angular/material' as mat; at the beginning of the file, which will create some global CSS classes that are not encapsulated.

Is there a way to encapsulate this global CSS classes?