無法將簡單的 CSS 應用於有角度的材料元素

Question

這是Stackblitz。

我正在嘗試將 CSS color: blue應用於類mat-button-toggle-label-content的 div ，但它沒有得到應用。

類似的 CSS 已成功應用於名為mat-button-toggle-group的父元素。

Answer 1

只需將顏色應用於mat-button-toggle並將其保留在mat-button-toggle-group

工作堆棧閃電戰

mat-button-toggle-group {
  background-color: orange;

  mat-button-toggle { 
    color: blue;
  }
}

您可以將樣式應用於.mat-button-toggle-label-content但您需要打破Encapsulation 。

組件樣式被封裝。 您無法從組件外部訪問組件的樣式（類、ID）。 您需要刺入該組件並注入如下樣式

注意： /deep/ 已棄用，不再推薦。 所以你可以采用上述方法。 有關更多詳細信息，請查看組件樣式

mat-button-toggle-group {
  background-color: orange;

  /deep/ .mat-button-toggle-label-content {
      color: blue;
  }
}

Answer 2

有很多原因！

1. 您的 CSS 可能沒有正確插入到代碼中
2. Material Design 的順序 CSS 接替 CSS 的順序

我的解決方案是你可能需要在 color: blue; 之后加上 !important

它是：顏色：藍色！重要；

Answer 3

只需將它移動到styles.scss ，它就會起作用Stackblitz 。