Как переопределить тему угловой материал

Question

Каков лучший способ переопределить тему угловых материалов ...?

Является ли хорошей практикой переопределение классов угловых материалов, например:

.mat-form-field-infix {
    background-color : #000fff;
}

Или путем создания собственных классов CSS для элементов Angular-материала ..?

При создании собственных классов CSS я сталкиваюсь с проблемой при выборе внутренних дочерних элементов в элементе angular-material.

Здесь я создал пользовательский класс с именем "form-filter-select-wrapper", но я хочу изменить стиль элемента с классом "mat-form-field-infix", который является родительским элементом, на класс "form-filter-select-wrapper".

Как настроить свойства для этого класса "mat-form-field-infix".Что я не могу справиться с уровня компонентов.

Пожалуйста, посоветуйте мне лучший способ переопределить элементы углового материала.

Answer 1

На мой взгляд, лучший способ переопределить тему материала - создать собственную тему, как описано в официальной документации:

• Создание тематики вашего приложения Angular Material
• Создание тем вашего пользовательского компонента с помощью системы тем Angular Material

Основа заключается в создании настраиваемой темы для всего приложения с использованием угловых палитр / цветов по умолчанию ( доступно здесь ), выбирая между светлой или темной темой и позволяя применить ее ко всему приложению.

Тем не менее, вы можете пойти гораздо дальше, например:

• Создание пользовательских цветовых палитр на основе шестнадцатеричных цветовых кодов
• Создание нескольких тем и их применение к различным компонентам
• Тематические компоненты на основе родительского класса