Тематические рамки для ввода матов, mat-select и mat-paginator

Question

Я пытаюсь тематизировать вышеупомянутые элементы.Однако, если я применяю стили в глобальной области видимости, это просто не затрагивает все аспекты элемента.

Вот подход, который я реализовал / попробовал.https://stackblitz.com/edit/angular-b8a8oa

Буду признателен за любые указания на это.Я никогда не разрабатывал сложные угловые компоненты раньше.Я здесь, чтобы учиться.Документация по тематике различных компонентов в material.angular.io содержит мало информации.Поэтому я спросил здесь.

Спасибо

Answer 1

Я расследую, как это сделать также с другими компонентами.таким образом, что вы пытаетесь переопределить CSS, я сделал это, и это работает.Но это не правильно, и для каждого нового компонента все время приходится многократно переопределять работу.Правильный способ сделать это - создать собственную тему для дизайна материала.Вот документ, которому я следую до сих пор:

https://material.angular.io/guide/theming-your-components

Это моя рекомендация, следуйте по этому пути.

Answer 2

Кажется, вы тоже новичок css :) Вы добавили inline style и ожидаете, что все element будут затронуты.

Если вы нацеливаетесь на несколько elements, вы должны использоватьcss class для достижения этой цели.

Поскольку вы используете угловой материал, позвольте мне сказать, что у него есть свой собственный набор css class, который необходимо перезаписать, используя следующий синтаксис

/deep/ {className}{

}

ex

/deep/ .mat-dialog-container{
     background-color: cyan;
}

Для демонстрации вы можете использовать ссылку - https://stackblitz.com/edit/angular-b8a8oa-udwwjz