角度：如何更改导入组件的类变色？(angular: How to change an importe

我使用的是建立在MaterializeCSS库NGX-Materialise的，我试图建立一个导航栏：

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

使用CSS Materialise公司的预设颜色类之一： https://materializecss.com/color.html

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

这不起作用的渲染父元素仍然有“红”的颜色： 图像 开发工具

我试图用这样一个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:

尝试使用:host::ng-deep定义你的CSS规则时构造。

: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:

如果直接应用样式类Styles.css中（根）用，！重要的标记将覆盖任何其他样式。 但你会做它破坏了封装。 如果您申请使用/深的组件样式/样式将被覆盖，垫状场/深/（类名）{}（不建议使用的问题），请阅读https://blog.angular-university.io/角主机上下文/对由于自嘲问题进行了深入的解释，实际上你可以尝试添加/使用香草JavaScript的去除类，但操作DOM直接是不好的做法。

摘要：使用过时的语法不好，根级应用样式会引起密封问题，直接操作DOM是一个不好的做法，所以你可以使用的角度提供的工具来操作DOM来解决上述问题，请参考以下链接了解有关最佳做法来操作的角度DOM https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

文章来源: angular: How to change an imported component's class to change color?