Как стиль работает с компонентами в angular?

Question

Вопрос непонятный, но разберусь. В angular мы можем написать изолированное css для стилизации. Он довольно хорошо работает для нативных элементов html. Но, в отличие от реакции, angular оборачивает наш html пользовательскими элементами, такими как <app-card>...</app-card>. Когда я пишу css для этих элементов оболочки, это не работает.

Если у меня есть список сообщений, например

<div class="post-list">
   <app-card [post]="post" *ngFor="let post of posts"></app-card>
</div>

Если я напишу css, чтобы применить вертикальный зазор между app-card компонентами в PostListComponent. Ну ничего не происходит.

.post-list app-card:not(:last-child) {
  margin-bottom: 2rem;
}

Как заставить работать? Или с angular logi c, как я могу применить вертикальный зазор между angular компонентами

Answer 1

Просто добавьте display: block; в свой app-card компонент, и он будет работать должным образом.

.post-list app-card {
    display: block;
}


.post-list app-card:not(:last-child) {
  margin-bottom: 2rem;
}

<div class="post-list">
   <app-card>Card 1</app-card>
   <app-card>Card 2</app-card>
   <app-card>Card 3</app-card>
</div>

Answer 2

Вы можете определить encapsulation: ViewEncapsulation.None в своем компоненте следующим образом:

@Component({
    selector: 'foo',
    template: './foo.component.html',
    styleUrls: ['./foo.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class FooComponent { }

Что будет обрабатывать ваш. css так же, как если бы вы помещали его в глобальную область видимости.

Чтобы быть более точным, он не добавляет .fooComponent к каждому правилу css в foo.component.s css.

Answer 3

Нет причин, по которым это не должно работать. Просто попытался вставить сюда часть вашего кода. https://stackblitz.com/edit/angular-scss-demo-icqrye

app.component. html

<div class="post-list">
  <app-new *ngFor="let item of [1,2,3,4]"></app-new>
</div>

styles.s css

.post-list app-new:not(:last-child) p {
  margin-top: 2rem;
  color: green;
}

И работает отлично . Вы ищете что-то еще?

И если вы хотите добавить стиль (поля) непосредственно к компоненту, вам сначала нужно будет настроить отображение компонента на блокировку / гибкость в соответствии с требованиями.

.post-list app-new:not(:last-child) {
  display: flex;
}

введите описание изображения здесь

Answer 4

Вы можете выполнить итерацию в теге div, затем добавить свой класс

<div class="post-list">
   <div class="post" *ngFor="let post of posts">
       <app-card [post]="post"></app-card>
   </div>
</div>

И в свой css

.post-list .post:not(:last-child) {
  margin-bottom: 2rem;
}