Angular — порядок оценки классов CSS ⇐ CSS

[Anonymous]

Я переношу свои приложения на Angular 16 и Material и заменяю гибкий макет, который больше не поддерживается.
Я также провожу рефакторинг CSS с использованием scss, но снова сталкиваюсь с проблемой проблема с порядком оценок стилей классов, и я больше не хочу использовать слово «важный».
К сожалению, Angular по-прежнему размещает свой стиль ПОСЛЕ моих стилей.
В моем angular.json есть такая последовательность:

Код: Выделить всё

[
"./node_modules/@mdi/font/css/materialdesignicons.min.css",
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss",
"src/darkmode.scss"
]

Например, у меня есть кнопка со значком материала.

Код: Выделить всё

...

Во время выполнения Angular переводит его с помощью:

Код: Выделить всё

...

Любой стиль, который я добавляю в классы кнопок добавления, переопределяется всеми классами mdc*, которые оцениваются после, как вы можете видеть на изображении.

Я знаю::ng-deep и т. д. устарели.
Так как же мне сделать так, чтобы мои классы снова выигрывали у стилей реального времени?
Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/764 ... ss-classes