Angular Material styling is imported as 'mat'

Начните использовать переменные CSS!

Удаление поддержки IE11 открывает путь к тому, что меня очень волнует — переменным CSS, также известными как пользовательские свойства CSS! Думайте об этом как об определении API, который разработчики могут использовать для настройки стилей. Вы можете предоставить набор открытых свойств для установки размеров отступов или диапазона цветовых переменных и позволить разработчикам использовать и переопределять их. Представьте, что в библиотеке есть кнопка общего доступа с пользовательским стилем:

1 2 3 4 5 6 7 8

:root { --primary: pink; --accent: blue; } .share-button { background-color: var(--primary); color: var(--accent); }

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

1 2 3 4

:root { --primary: green; --accent: purple; }

Переопределение стилей

Переменные CSS открывают дверь к хорошо поддерживаемым API-интерфейсам для настройки компонентов, позволяя разработчикам отказаться от переопределений CSS и ::ng-deep.
Мы рекомендуем вводить пользовательские переменные в свои библиотеки и зависимости, чтобы создать API для настройки библиотек без необходимости использования ::ng-deep. Реализация пользовательских переменных позволяет разработчикам иметь больший контроль над своим стилем и обеспечивать обходной путь для переопределений стилей CSS и ::ng-deep.
Angular CLI может помочь вам со стилями
Встроенный Sass в компонентах
V12 представила возможность использовать встроенный Sass в ваших компонентах Angular. В интерфейсе командной строки теперь есть возможность предоставить inlineStyleLanguage и компилировать Sass прямо из компонентов Angular в стили. Это полезно для разработчиков, использующих отдельные файлы компонентов или желающих добавить небольшое количество стилей к своим файлам компонентов. Чтобы использовать Sass, вам нужно указать язык angular.json в конфигурации сборки:

1 2 3 4 5 6 7 8 9

{ "projects": { "architect": { "build": { "options": { "styles": [ "src/styles.scss" ], "inlineStyleLanguage": "scss", ...

Теперь вы можете писать Sass в своих @Components!

1 2 3 4 5 6 7 8 9 10 11

import { Component } from '@angular/core';@Component({ selector: 'app-root, template: '