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

问题

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

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

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>

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

回答1:

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

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

回答2:

If you are using SASS then you can change _variables.scss for primary color. Some thin like bellow..

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

回答3:

If you apply the style to class directly in styles.css (root) with, !important tag it will overwrite any other styles. But you will break encapsulation by doing it. If you apply styles in the component using /deep/ the style will be overwritten, mat-form-field /deep/ (class-name) {} (Deprecated issues) please read https://blog.angular-university.io/angular-host-context/ for an in-depth explanation Because of Deprecating issues, you can actually try to add/remove classes using vanilla javascript, but manipulating dom directly is a bad practice.

Summary: Using Deprecated syntax is bad, applying style on root level will cause encapsulation issues, manipulating dom directly is a bad practice, so you can use the tools provided by angular to manipulate the dom to resolve above issues, please refer below link to learn about best practice to manipulate dom in angular https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

来源：https://stackoverflow.com/questions/53717527/angular-how-to-change-an-imported-components-class-to-change-color

标签

angular

materialize