• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

151
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?

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error