Предотвращение распространения стилей angular материал css на другие компоненты

Question

поэтому у меня есть переопределение к angular стилю материала в моем глобальном стиле s css, например:

.mat-form-field-infix{
   padding: 0.5em 0 0.5em 0 !important;
}

, тогда я хочу применить другой отступ к тому же элементу в моем компоненте, так как Мне нужно немного больше места для просмотра большего количества данных; Вот что я делаю в стиле * css моего компонента:

:host ::ng-deep .mat-form-field-infix{
   padding: 0.2em 0 0.2em 0 !important;
}

, но последний стиль распространяется на все компоненты после его загрузки. поэтому вопрос в том, как я могу предотвратить такое поведение?

Answer 1

Обратите внимание, что ::ng-deep предназначено для устаревания: см. Специальные селекторы .

Однако вы можете следовать стратегии, описанной Юрием: если вам нужны дополнительные отступы для всех потомков из my-roomy-component, вы можете настроить таргетинг на CSS из ваших глобальных стилей, таких как

my-roomy-component .mat-form-field-infix {
  padding: 0.2em 0 0.2em 0 !important;
}

И, опять же, как предлагает Юрий, добавьте больше специфичности к селектору, чтобы помочь заполнению вступить в силу без !important. В качестве альтернативы, внешнему компоненту может быть присвоено значение None для инкапсуляции вида, поэтому его стили становятся глобальными, но область действия снова с селекторами CSS.