angular:如何更改导入的组件的类以更改颜色? [英] angular: How to change an imported component's class to change color?

问题描述

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

I am using a library ngx-materialize which is built on MaterializeCSS and I am trying to build a navbar:

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

使用Materialize CSS的预设颜色类别之一: https://materializecss.com/color.html

using one of Materialize CSS's preset colour class: https://materializecss.com/color.html

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

这不起作用，因为渲染的父元素仍然具有红色"的颜色: 图像 开发工具

This doesn't work as the rendered parent element still has the color of "red": image dev tools

我尝试用div包裹，就像这样:

I have tried wrapping the with a div like this:

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

但是结果仍然相同，如何使用库的CSS类更改导入的组件的颜色?

but the results is still the same, how do I change an imported component's color with a library's css classes?

推荐答案

在定义CSS规则时尝试使用:host::ng-deep构造.

Try using :host::ng-deep construct when defining your CSS rule.

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

这篇关于angular:如何更改导入的组件的类以更改颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！