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?