angular：如何更改導入的組件的類以更改顏色？

Question

我正在使用基於MaterializeCSS構建的庫ngx-materialize，並且正在嘗試構建導航欄：

https://sherweb.github.io/ngx-materialize/navbar

使用Materialize CSS的預設顏色類之一： https : //materializecss.com/color.html

<mz-navbar class="blue-grey darken-3">
<a href="/" class="brand-logo center">
  LOGO
</a>
</mz-navbar>

這不起作用，因為渲染的父元素仍然具有“紅色”的顏色： image dev tools

我試過用div這樣包裝：

<mz-navbar>
  <div class="blue-grey darken-3">
    <a id="dashboard-logo" href="" class="brand-logo center">
      LOGO
    </a>
  </div>
</mz-navbar>

但是結果仍然相同，如何使用庫的CSS類更改導入的組件的顏色？

Answer 1

定義CSS規則時，請嘗試使用:host::ng-deep構造。

:host::ng-deep nav {
  background-color: // your choice of colour;
}

Answer 2

如果使用的是SASS，則可以將_variables.scss更改為原色。 有些薄如波紋管..

$primary-color: color("materialize-red", "lighten-2") !default; // change here your color scheme

Answer 3

如果使用！important標簽將樣式直接應用於styles.css（根目錄）中的類，它將覆蓋任何其他樣式。 但是，這樣做會破壞封裝。 如果您使用/ deep /在組件中應用樣式，則樣式將被覆蓋，mat-form-field / deep /（類名）{}（不建議使用的問題），請閱讀https://blog.angular-university.io/ angular-host-context /進行了深入的解釋由於存在不贊成使用的問題，您實際上可以嘗試使用香草javascript添加/刪除類，但是直接操作dom是一種不好的做法。

簡介：使用不贊成使用的語法是不好的，在根級別上應用樣式會導致封裝問題，直接操作dom是一種不好的做法，因此您可以使用angular提供的工具來操縱dom來解決上述問題，請參考以下鏈接以學習關於在角度操作dom的最佳實踐https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02