如何替换整个应用程序的角度主题 CSS 样式表？

Question

首先我无法通过 index.html 导入 css，并且出现 MIME 类型错误： enter image description here 拒绝应用来自 'http://localhost:4200/css/pink-bluegrey.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

如果我尝试通过 angular.json 导入它，那么我无法插入 ID 标签 id="themeAsset"。

我想添加 id 的原因是因为我想从 https://material.angular.io/guide/theming 执行此操作

函数 changeTheme(themeName) { document.getElementById('themeAsset').href = /path/to/my/${themeName}.css; } 所以我可以通过单击更改整个应用程序样式的样式，而不是向每个组件添加类

Answer 1

工作 Stackblitz :- https://stackblitz.com/edit/angular-jrkmhn

我将我的 css 放在 assets 文件夹中，即 myStyles.css

CSS :-

.myDiv {
  background-color: black;
}

index.html

<link id="myLink">
<my-app>loading</my-app>

app.component.html

<div class="myDiv">Css Will Load</div>

<button style="margin-top: 2em" (click)="changeTheme('')">Change Theme</button>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';


changeTheme(themeName) {
   var elem = document.getElementById('myLink');
   elem.setAttribute('href','./assets/myStyles.css');
   elem.setAttribute('rel','stylesheet');
   elem.setAttribute('type','text/css');
}
}