angular: 如何让导入组件的class变色？

Question

我正在使用基于 MaterializeCSS 构建的库 ngx-materialize，我正在尝试构建导航栏：

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

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

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

这不起作用，因为呈现的父元素仍然具有 "red" 的颜色： 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 classes 更改导入组件的颜色？

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

如果您直接在 styles.css（root）中将样式应用到 class，带有 !important 标签，它将覆盖任何其他样式。但是这样做会破坏封装。如果您使用 /deep/ 在组件中应用样式，样式将被覆盖，mat-form-field /deep/ (class-name) {}（已弃用的问题）请阅读 https://blog.angular-university.io/angular-host-context/ 以获取 in -深度解释由于弃用问题，您实际上可以尝试 add/remove classes 使用 vanilla javascript，但直接操作 dom 是一种不好的做法。

总结：使用Deprecated语法是不好的，在根级别应用样式会导致封装问题，直接操作dom是一种不好的做法，所以你可以使用angular提供的工具来操作dom 解决上述问题，请参阅下文 link 以了解在 angular https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

中操纵 dom 的最佳实践

angular: 如何让导入组件的class变色？

angular: How to change an imported component's class to change color?

materialize

angular