Encapsulate all Angular Material styles inside the microfrontend, changing CdkOverlayContainer root DOM node.

app.component.scss

@import '~scss/mixins/custom-material-theme';

:host ::ng-deep {
  // mixin to generate custom Material theme (see official docs)
  @include custom-material-theme();

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
}

:host {
  --bla-bla: "bla-bla-bla";
  // ...
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-style-container class="app-material-css-aggregator mat-typography">
      <router-outlet></router-outlet>
    </app-style-container>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {}

app.module.ts

// ...

@NgModule({
  // ...
  providers: [{
    provide: OverlayContainer,
    useClass: CustomOverlayContainerService
  }],
})

// ...

custom-overlay-container.service.ts

import { ComponentFactoryResolver, Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { OverlayContainer } from '@angular/cdk/overlay';
import { Platform } from '@angular/cdk/platform';

import { StyleContainerComponent } from './my/style-container.component';

@Injectable({
  providedIn: 'root',
})
export class CustomOverlayContainerService extends OverlayContainer {
  private readonly customParentTagName: string;

  /**
   * Add ComponentFactoryResolver to retrieve metadata of a custom DOM parent component to attache `cdk-overlay-container` to.
   * @override
   */
  constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(DOCUMENT) document: any, protected platform: Platform) {
    super(document, platform);

    const factory = this.componentFactoryResolver.resolveComponentFactory(StyleContainerComponent);
    this.customParentTagName = factory.selector;
  }

  /**
   * Provide custom DOM parent node for `cdk-overlay-container`.
   * @override
   */
  protected _createContainer(): void {
    const containerCssClasses = ['cdk-overlay-container', 'dex-global-cdk-overlay-container'];
    const containerParentSelector = `${this.customParentTagName}`;

    const container = this._document.createElement('div');
    container.classList.add(...containerCssClasses);

    this._document.querySelector(containerParentSelector).appendChild(container);
    this._containerElement = container;
  }
}