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来解决上述问题，请参考以下内容链接，以了解最佳操作方式，以按角度https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

操作dom

angular：如何更改导入的组件的类以更改颜色？

3 个答案: