Переопределить угловой материал CSS по-разному в разных компонентах

Question

У меня есть два компонента с группами вкладок в них. Одна из них - главная страница, и я переписал CSS, чтобы увеличить метки, используя ViewEncapsulation.None. Другой - это диалог, и я хочу, чтобы он был небольшим, но все же применял к нему некоторые другие пользовательские стили.

Когда я открываю диалоговое окно после посещения страницы других вкладок, оно копирует все стили, которые я изобразил, потому что ViewEncapsulation.None отбрасывает CSS, но не совсем так, как ожидалось.

Есть ли способ переопределить стили углового материала без изменения ViewEncapsulation, чтобы я мог разделить два компонента?

Answer 1

Если вы хотите настроить компоненты материала Angular и предоставить свои собственные стили, у меня есть следующие предложения. Вы можете использовать один из них.

1) Перезаписать классы в основном файле style.css (или style.scss, в зависимости от того, что вы используете). Если вам интересно, это тот, который находится на том же уровне каталогов, что и ваш index.html, main.ts, package.json и т. Д. Вам может понадобиться добавить объявление! Важное.

Например,

.mat-form-field-label {
  color:blue!important;
}

2) Настройка директивы Angular Material (например, MatPlaceholder) путем предоставления пользовательского класса.

Например, когда мы используем MatPlaceHolder и в шаблоне component.html,

<mat-placeholder class="placeholder">Search</mat-placeholder>

В вашем component.css мы можем затем предоставить свойства css классу placehodler

.placeholder {
  color: green
}

---

Примечание: В качестве альтернативы вы можете использовать :: ng-deep, но я настоятельно рекомендую использовать :: ng-deep, так как это скоро будет устаревшим.

::ng-deep .mat-dialog {
  /* styles here */
  /* try not to use ::ng-deep */
}

Answer 2

Решение 1: вы можете поместить все элементы вашего компонента в родительский элемент с классом css и переопределить в нем стиль материала (это пользовательская капсуляция)

Примечание: ViewEncapsulation здесь отсутствует.

component.html

<div class="my-component__container">
    <!-- other elements(material) are here -->
</div>

component.scss

.my-component__container{
    // override material styles here
    .mat-form-field{...}
}

Решение 2: использовать /deep/. ( устарело )

:host /deep/ .mat-form-field {
  text-align: left !important;
}

Answer 3

Вы можете использовать :: ng-deep. См. NgDeep