Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

67
Views
Angular micro-frontend how to encapsulate global CSS?

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.

Global CSS from @use '~@angular/material'

Is there a way to encapsulate this global CSS classes?

7 months ago ยท Juan Pablo Isaza
Answer question
Find remote jobs