基于Angular Elements的微前端引入Angular Material的样式异常问题

方案1：修改预构建主题的选择器作用域 #

预构建主题默认把CSS变量定义在<html>元素上，但Shadow DOM内部无法访问外部的<html>变量。你可以复制预构建主题文件，将选择器替换为Shadow DOM内部的根作用域：

1. 复制@angular/material/prebuilt-themes/azure-blue.css到项目本地（比如src/styles/material-custom-theme.css）
2. 全局替换文件中所有的html （注意保留空格）为:root 或:host
   • :root在Shadow DOM中指向组件的Shadow Root本身
   • :host指向Web Component的宿主元素
3. 在你的Web Component组件的styles数组中引入修改后的主题文件：

   @Component({
     selector: 'your-web-component',
     templateUrl: './your-web-component.component.html',
     styles: [
       require('./styles/material-custom-theme.css').toString()
       // 或根据构建配置使用相对路径引入
     ]
   })
   

修改后主题的CSS变量会被定义在Shadow DOM内部的根作用域，组件内的Material元素就能正常读取变量了。

方案2：同步外部全局CSS变量到Shadow Root #

如果希望组件复用外部页面的Material主题变量，可以在组件初始化时，把外部<html>上的CSS变量同步到Shadow Root中：

在组件类中添加以下代码：

import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  // 组件配置
})
export class YourWebComponent implements OnInit {
  constructor(private elementRef: ElementRef) {}

  ngOnInit(): void {
    const htmlElement = document.documentElement;
    const htmlStyles = getComputedStyle(htmlElement);
    const shadowRoot = (this.elementRef.nativeElement as HTMLElement).shadowRoot;

    if (shadowRoot) {
      // 筛选并同步所有Material相关的CSS变量
      Array.from(htmlStyles).forEach(prop => {
        if (prop.startsWith('--mat-')) {
          const value = htmlStyles.getPropertyValue(prop);
          shadowRoot.style.setProperty(prop, value);
        }
      });
    }
  }
}

注意：使用这个方案时，需要确保外部页面已经加载了Material主题样式，否则无法读取到变量。

方案3：自定义SCSS主题并限定作用域 #

如果需要更灵活的主题控制，可以直接用SCSS构建自定义主题，将变量作用域限定在Shadow DOM内部：

1. 创建自定义主题文件src/styles/material-custom-theme.scss：

@use '@angular/material' as mat;

// 定义主题变量并限定在:host作用域内
:host {
  // 定义基础主题变量
  --mat-app-background-color: #faf9fd;
  --mat-app-text-color: #1a1b1f;

  // 构建Material主题
  @include mat.core();
  $primary-palette: mat.define-palette(mat.$azure-blue-palette);
  $accent-palette: mat.define-palette(mat.$azure-blue-palette, A200, A100, A400);
  $warn-palette: mat.define-palette(mat.$red-palette);
  $custom-theme: mat.define-light-theme((
    color: (
      primary: $primary-palette,
      accent: $accent-palette,
      warn: $warn-palette,
    )
  ));

  // 引入所有Material组件的主题样式
  @include mat.all-component-themes($custom-theme);
}

2. 在组件中引入这个SCSS文件：

@Component({
  selector: 'your-web-component',
  templateUrl: './your-web-component.component.html',
  styles: [
    './styles/material-custom-theme.scss'
  ]
})

这个方案能让你完全控制主题的作用域，且无需依赖外部页面的样式配置。

内容的提问来源于stack exchange，提问作者andymel