angular: Как изменить класс импортируемого компонента, чтобы изменить цвет?

Question

Я использую библиотеку ngx-materialize, которая построена на MaterializeCSS, и я пытаюсь создать панель навигации:

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

, используя один из предустановленных классов Colorize CSS CSS:1006 *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

Если вы используете SASS, вы можете изменить _variables.scss на основной цвет.Какой-то тонкий, как сильфон ..

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

Answer 2

Если вы примените стиль к классу непосредственно в файле styles.css (root) с тегом! Важный, он перезапишет любые другие стили.Но вы нарушите инкапсуляцию, сделав это.Если вы применяете стили в компоненте, используя / deep / стиль будет перезаписан, mat-form-field / deep / (class-name) {} (Устаревшие проблемы), пожалуйста, прочитайте https://blog.angular -university.io / angular-host-context / для подробного объяснения. Из-за проблем с устареванием можно на самом деле попытаться добавить / удалить классы, используя vanilla javascript, но манипулирование dom напрямую является плохой практикой.

Резюме: ИспользованиеУстаревший синтаксис плох, применение стиля на корневом уровне вызовет проблемы инкапсуляции, манипулирование dom напрямую является плохой практикой, поэтому вы можете использовать инструменты, предоставляемые angular, для манипулирования dom для решения вышеуказанных проблем, пожалуйста, перейдите по ссылке ниже, чтобы узнать о лучших практикахманипулировать домом в угловых https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

Answer 3

Попробуйте использовать конструкцию :host::ng-deep при определении правила CSS.

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