Если вы хотите настроить компоненты материала Angular и предоставить свои собственные стили, у меня есть следующие предложения. Вы можете использовать один из них.
1) Перезаписать классы в основном файле style.css (или style.scss, в зависимости от того, что вы используете). Если вам интересно, это тот, который находится на том же уровне каталогов, что и ваши index.html, main.ts, package.json и т. Д. Вам может потребоваться добавить! Важное объявление
.mat-form-field-label {
color:blue!important;
}
2) Используйте ViewEncapsulation:None для этого конкретного компонента. Это удаляет всю инкапсуляцию, так что правила CSS будут иметь глобальный эффект. При этом вы можете настроить свойства CSS, отредактировав классы в component.css.
3) Использование /deep/. (Однако устарело / скоро будет объявлено устаревшим, поэтому я не рекомендую вам использовать его в долгосрочной перспективе)
На вашем component.ts,
:host /deep/ .mat-form-field {
text-align: left !important;
}
4) Предоставление директив с пользовательским классом
<mat-placeholder class="placeholder">Search</mat-placeholder>
А на твоем css
.placeholder {
color: green
}