Как переписать пользовательский компонент css в angular 8

Question

Я пытался перезаписать css пользовательского селектора компонентов, но он не работает. Я пытался :ng-deep безуспешно. Как мне найти решение для этого?

app.component. html:

<mycustommcomp></mycustommcomp>

app.component. css:

::ng-deep mycustommcomp{ 
margin:2px;
overflow:unset !important; 
}

mycustomcomp .component. css:

mycustommcomp{ 
margin:8px;
overflow:hidden !important; 
}

Демонстрация: https://stackblitz.com/edit/angular-vsdzqs?file=src / app / app.component. css

Answer 1

Вы не можете сделать это, так как стиль не может быть применен к тегам компонента. Один из способов заставить это работать - это обернуть содержимое внутри mycustommcomp контейнером (например, div).

mycustommcomp.component. html:

<div class="container">
   <!--Content here-->
</div>

app.component. css:

::ng-deep .container{ 
   margin:2px;
   overflow:unset !important; 
}

mycustomcomp.component. css:

.container{ 
   margin:8px;
   overflow:hidden !important; 
}

Тем не менее, пожалуйста, избегайте делать это, так как :: ng-deep is не рекомендуется .