How to overwrite custom component css in angular 8

Question

I tried to overwrite the css of a custom component selector but it is not working. I have tried :ng-deep without success. How do I find a solution for this?

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; 
}

Demo: https://stackblitz.com/edit/angular-vsdzqs?file=src/app/app.component.css

Aluminium Shek · Accepted Answer · 2020-02-12 05:14:30Z

1

You cannot do this as style cannot be applied to component tags. One way to make it works is to wrap the content inside mycustommcomp with a container (such as 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; 
}

Nevertheless please avoid doing this as ::ng-deep is deprecated.

answered Feb 12, 2020 at 5:14

Aluminium Shek

2961 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nila Vaani Over a year ago

Do not use class.i want to overwrite the selector mycustommcomp css

Collectives™ on Stack Overflow

How to overwrite custom component css in angular 8

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related