如何为整个应用替换 angular 主题 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

函数更改主题（主题名称）{ document.getElementById('themeAsset').href = /path/to/my/${themeName}.css; } 所以我可以通过单击而不是将类添加到每个组件

来更改整个应用程序样式的样式

Answer 1

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

我将 css 放在资产文件夹中，即 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');
}
}

如何为整个应用替换 angular 主题 CSS 样式表？

how to replace angular theme CSS stylesheet for whole app?

css

theming

angular