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

Question

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

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

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

Спасибо

Answer 1

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

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

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

/deep/ {className}{

}

бывший

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

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

Answer 2

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

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

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