如何更改Angular Material 2 CSS導入順序？

Question

在使用Angular CLI構建的Angular 2應用程序中，我按照官方安裝指南設置了Angular 2 Material組件。

Angular 2 Material將其主要CSS樣式放在頁面<head>始終位於我的自定義CSS樣式之下。 如果我需要覆蓋它們，這會對我產生影響。

如何強制Angular 2 Material將其核心CSS樣式置於我在Angular CLI main（entry）CSS文件中定義的樣式之上？

Answer 1

在root上的style.css文件中導入材質主題：

例如

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

你可以替換indigo-pink.css自己的選擇。

Answer 2

我認為您遇到的問題是由於在index.html中對您的css文件進行了一些引用，並且在angular-cli.json文件中有其他文件。

下面是我的angular.cli json文件和index.html的示例

無論你在index.html中定義了什么，都要在angular-cli.json文件中定義的內容之前。 如果要對它們重新排序，請在angular-cli.json文件中包含對所有css文件的引用。

請注意我的styles.css文件是angular-cli.json文件中列出的最后一個文件。

編輯（再次重讀原始問題后）

我認為你需要創建自己的自定義主題並導入它。

Per Angular Material的文檔

為了使用Angular Material的工具設置自己的組件樣式，必須使用Sass定義組件的樣式。

您只需要在custom-component-theme.scss中創建一個@mixin函數

請參閱Angular Material關於主題自己組件及其主題指南的文檔

Answer 3

我已經解決了加載視圖后加載自定義css。

export class AppComponent implements AfterViewInit {

  ngAfterViewInit() {
    this.linkExternalStyleSheet('assets/styles/custom-theme.css');
  }

  linkExternalStyleSheet(externalStyleSheetUrl: string) {
    const overrideStyleSheet: any = document.getElementById('extStyleLink');
    if (overrideStyleSheet) {
      overrideStyleSheet.href = externalStyleSheetUrl;
    } else {
      const link = document.createElement('link');
      link.id = 'extStyleLink';
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.media = 'screen';
      link.href = externalStyleSheetUrl;
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
}

Answer 4

是的，在Angular材質中，它會在元素/組件加載時動態添加實體CSS。 所以，你不能改變它的順序。

但是要解決您的問題，您可以使用CSS特異性來覆蓋它。 您可以在正文或app-component中添加自定義類，使用SCSS / CSS可以使用自己的CSS覆蓋材質CSS。

以下是使用SCSS的示例，用於更改復選框樣式。 和project__app類名，我在app-component中提到過。 您也可以使用body代替它，或者在元素的父級上創建特定的類。

.project__app
{
    /* checkbox customization */
    .mat-checkbox-layout
    {
        margin-bottom: 0px;
    }
    .mat-checkbox-inner-container
    {
        height: 20px;
        width: 20px;
    }
    .mat-checkbox-frame {
        border-color: rgba(0, 0, 0, 0.5);
        border-width: 1px;
    }
}

如何更改Angular Material 2 CSS導入順序？

問題描述

4 個解決方案

解決方案1
1 2017-11-10 11:58:14

解決方案2
0 2017-06-05 19:18:48

解決方案3
0 2019-01-09 03:31:04

解決方案4
0 2019-07-22 08:15:22

如何更改Angular Material 2 CSS導入順序？

問題描述

4 個解決方案

解決方案1 1 2017-11-10 11:58:14

解決方案2 0 2017-06-05 19:18:48

解決方案3 0 2019-01-09 03:31:04

解決方案4 0 2019-07-22 08:15:22

解決方案1
1 2017-11-10 11:58:14

解決方案2
0 2017-06-05 19:18:48

解決方案3
0 2019-01-09 03:31:04

解決方案4
0 2019-07-22 08:15:22