Наша команда переводит нашу кодовую базу на Angular 2, и, отвечая за разработку / организацию CSS, я рассмотрел варианты добавления стилей в Angular 2, а также то, как Angular 2 может изменить способ создания нашего пользовательского интерфейса.Многие из наших элементов пользовательского интерфейса будут компонентами.Одна вещь, которую я хотел бы сделать, это добавить собственный класс CSS к родительскому элементу в шаблоне компонента в зависимости от того, где он появляется.Вот пример элемента пользовательского интерфейса:
<button class="basic-button">
Some action text
</button>
Это будет жить в файле с именем basic-button.component.html.Его компонентный селектор basic-button.Допустим, кнопка появляется на странице настроек учетной записи клиента, а дизайн требует значения цвета текста, отличного от нашего по умолчанию.Мы хотели бы добавить CSS-класс модификатора к элементу button:
<button class="basic-button--alert basic-button">
Some action text
</button>
Но если эта же кнопка также появляется на странице продукта и требует еще одного значения цвета, нам нужно применить другой класс-модификатор:
<button class="basic-button--warning basic-button">
Some action text
</button>
Есть ли способ присоединить пользовательский класс к элементу кнопки в зависимости от того, где он появляется?Важно применить класс к фактическому элементу HTML, поскольку применение его к селектору компонентов может не повлиять должным образом на стиль, как в этом случае цвет текста кнопки.По определенным причинам мы не планируем ограничивать наш CSS, поэтому теоретически мы можем использовать вложение для достижения наших целей:
.account-settings .basic-button {
color: red;
}
.product-details .basic-button {
color: orange;
}
Но мы предпочитаем минимизировать вложение как можно больше.