Namespacing Угловые стили материалов

Question

Я пытаюсь создать многоразовые компоненты, используя Angular 1.4.3 и Angular-Material 1.0.5. Идея заключается в том, что мы можем интегрировать эти компоненты в разные приложения.

Но проблема, с которой я столкнулся, заключается в том, что Угловой материал CSS имеет определенные стили, применяемые к таким элементам, как html, body, из-за которых стили приложения-потребителя переписываются.

Чтобы добавить больше ясности в это, рассмотрите пример приложения A, который имеет свои собственные стили для тегов «body», «html», «input». Это приложение будет включать CSS и JS моего пользовательского компонента, чтобы получить мой многоразовый компонент. При этом приложение А теряет свой стиль. И я не могу делать «важные» в стилях приложения А, поскольку я их не владею.

Чтобы устранить эту проблему, я попробовал смену угловых стилей материалов, как часть моего процесса сборки grunt. Но это не помогло решить проблему, и большинство моих угловых материальных директив, похоже, не работают.

Я попытался проверить проблемы с угловым материалом github, но я не вижу правильного решения для этого.

https://github.com/angular/material/issues/6369

https://github.com/angular/material/issues/469

Есть ли способ правильно пространства имен угловых стилей материала? Пожалуйста помоги.

Answer 1

Не совсем уверен, правильно ли я понял, но используя !important на свой собственный стиль, вы должны переопределить те, что установлены Ng Material.

Для того, чтобы один из примеров вы связаны с

input { 
    font-family: Tahoma !important; 
} 

Но, помните, только использовать !important, когда это действительно необходимо. Как и в этом случае, когда вы не можете управлять стилями, которые вам нужно переопределить.