Загрузить угловой материал перед собственными стилями

Question

У нас есть проект Angular с материалом, и у нас есть некоторые проблемы с переопределением стилей.

Например, если мы хотим глобально изменить border-radius на <mat-card>, нам необходимо добавить important к стилям:

.mat-card { border-radius: $some-var !important; }

Это мне кажетсябыть вызвано загрузкой стилей материала после наших собственных стилей.По крайней мере, в соответствии с «традиционными» стандартами CSS.Поэтому обычно вы можете просто изменить порядок загрузки, и последние загруженные стили перезапишут предыдущие.

Есть ли способ добиться этого?Или как мы должны стилизовать элементы такого типа, не добавляя !important на всем протяжении?

Answer 1

На самом деле вы не должны "разрабатывать подобные элементы" - это не то, что представляет собой Angular Material.Но некоторые настройки могут быть выполнены - и доступно руководство: https://v6.material.angular.io/guide/customizing-component-styles.

Вам особенно необходимо понять, как стиль инкапсулируется и динамически применяется.Вы можете контролировать, когда глобальная таблица стилей Angular Material загружается «традиционным» способом, но вы не можете контролировать, когда применяются все стили компонента, потому что некоторые из них являются динамическими.Если вы надеетесь полностью перекомпилировать все - возможно, вам следует рассмотреть другую библиотеку, поскольку это не всегда просто вопрос переопределения свойств класса.