Почему изменение css для одного компонента влияет на все остальные компоненты?

Question

Цель : CSS влияет только на включенный компонент, но не на другие. Я хотел повлиять только на раскрывающийся список, а не на другие поля ввода текста:

Справочная информация / проблема : я понимаю, почему это так влияет на несколько элементов на одной странице (поле mat-form-field). Но не понимаю, почему это повлияет на ДРУГИЕ страницы. Я смотрел на это, но все еще не был уверен.

Что я пытался : Например, у меня изначально было:

::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
    height: 40px !important
}

::ng-deep .mat-form-field-infix {
    padding-top: 1px !important;
    padding-bottom: 2px !important;
}

Но это влияло на расстояние между всеми формами. поля на странице, , поэтому я отредактировал его так: :

::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
    height: 40px !important
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
    padding-top: 1px !important;
    padding-bottom: 2px !important;
}

Прочее без изменений CSS:

.title-container {
    position: relative;
    margin-top: 8px;
}

.language-field {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -16px;
    width: 115px;
    height: 20px !important;
}

Это исправлено, но все еще Странно для меня, что изменение чего-либо на login.component. css повлияет на все другие страницы сайта, например profile.component. css

Здесь ассоциируется HTML для login.component:

<div class="title-container">
    <mat-card-title class="text-center">
        Please Sign In
    </mat-card-title>

    <form [formGroup]="_siteForm">
        <mat-form-field class="language-field" appearance="outline">
            <mat-select (selectionChange)="changeSite($event)" [value]="languages[i].value">
                <mat-option *ngFor="let language of languages" [value]="language.value">
                    {{language.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </form>        
</div> 

Когда я исследовал это : я обнаружил некоторые статьи SO (такие как Angular 2+: стиль компонента продолжает влиять на другие компоненты ), упоминающие использование инкапсуляции: ViewEncapsulation Однако, просматривая сайт, я не вижу, чтобы это использовалось где-либо, однако есть css для разных компонентов, которые упоминают mat-form-field, но с разными значениями. Это похоже на то, что это означает, что инкапсуляция не нужна. В обычном HTML у меня не было таких проблем, но я запутался, как это работает в Angular. Это как-то связано с тем, что Angular является SPA?

Answer 1

Немного сложно набрать asp того, что вы пытаетесь показать здесь без фрагмента кода с этим CSS.

Но если это нарушает инкапсуляцию представления Angular, которую имеют все компоненты по умолчанию я был бы почти уверен, что это потому, что вы используете !important селекторы, они действительно должны использоваться только в самых редких ситуациях - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Причина это потому, что использование !important нарушит специфику css, которую Angular использует для encapsulate его компонентов.

Css специфичность работает следующим образом.

Встроенные стили стоят того 1000pt

Идентификаторы стоят 100pt

Классы стоят 10pt

Элементы стоят 1pt

!important, по сути, стоит бесконечные баллы, он всегда имеет приоритет .

div>p>.className = 12pts
div>p>#classname = 102pts

Это означает, что любые стили в

div>p>#classname

будут иметь приоритет по любым стилям в

div>p>.classname

Я не буду go в подробности ее О том, как Angular достигает инкапсуляции с помощью этой техники, если вам интересна вот хорошая статья - https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

Answer 2

Я думаю, что это ваш ::ng-deep, удалите его.

Затем используйте конкретное c имя класса и объявите его в файле css компонентов. например, в home.component. css

.mat-form-field-flex {
    height: 40px !important
}