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

Question

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?

Yes, changing from the default red to a dark grey: "blue-grey darken-3" which is one of the preset color classes that MaterializeCSS provides — terahertz, Dec 11 '18 at 05:31

score 2 · Accepted Answer · answered Dec 11 '18 at 05:00

2

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

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

answered Dec 11 '18 at 05:00

Ankit Sharma

1,674
8
11

1

Thanks! It works but according to Angular's doc, ::ng-deep is deprecated and will be removed from major browsers: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep . Is this a concern and are there any other workarounds? – terahertz Dec 11 '18 at 05:28
@Riv As the documentation quotes, `As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.` I believe it would be fine till they drop and come up with any alternative. – Ankit Sharma Dec 11 '18 at 05:32
Thank you again, will do so! I googled and it seems they are just marking it as deprecated because of W3C's specs as answered here: https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep – terahertz Dec 11 '18 at 05:36

score 0 · Answer 2 · answered Dec 11 '18 at 05:46

0

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

answered Dec 11 '18 at 05:46

R. Viral

386
1
6

Akshay Rajput · Answer 3 · 2018-12-11T08:17:31.560

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

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/21653975) — Johan, Dec 11 '18 at 07:24
Sorry, I didn't know these rule, edited my post, I just wanted to help him, please change your review I have recently started commenting on stack overflow Q & A. — Akshay Rajput, Dec 11 '18 at 08:22

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

3 Answers3

Linked