Overriding the Encapsulated CSS of External Component

Overriding the encapsulated CSS of external component

You can use the special css /deep/ instruction. See the documentation

So, if you have

<div class="target-class">...</div>

You can put in your apps css (or less):

/deep/ .target-class {
width: 20px;
background: #ff0000;

Obviously, you can put this css fragment in sub-component as well.

How to override CSS styles of component in Angular?

you could use the ng-deep selector:

::ng-deep app-button span:hover {
color: green;

which will make your styles penetrate to child components. but this functionality is due to be deprecated soon according to the angular team, and people are advised to get off of it. (PERSONAL opinion: too many projects rely on ng-deep for them to deprecate it anytime soon)

the best way to do it currently IMO is with a global style sheet with something like:

app app-button span:hover {
color: green;

you also could set the view encapsulation to none on your parent component, but that's functionally similar to a global style sheet, and can be confusing if you don't set things up correctly and forget where / why you put global styles that only load when a component loads, and leads to some bugs in my experience.

Overriding the encapsulated :host-style of external component


As found on http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/: add an attribute to the body-tag:

<body override>

And in your css: use a selector for this attribute:

[override] hello-world h1 {

This way, your css does not have to be parsed.

Previous solution:

I've found a solution myself: instead of linking my (theming) css-file in index.html, which isn't parsed, I imported this particular css-file in the app.component.ts annotation.


<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet/css" type="text/css" href="/assets/style/app.css" />


import { ... }
selector: 'app',
styles: [`
@import "assets/style/theme.css";
template: `
export class AppComponent {...}


sidebar {background: red; }

Overriding global css in a new component Angular

Add !important in the end of your CSS rule to ovverride global styles.


.btn {
background-color: red !important;

Hope this helped.

Overwrite css class property for library component in Angular-5

I used ::ng-deep pseudo-class selector, refereed this Docs https://blog.angular-university.io/angular-host-context for angular view encapsulation.

Below code snippet works for me to overwrite the css property using ng-deep.
e.g in my case <test-dropdown> is a angular component which takes default css class .dropdown of it, now i want to modify min-width property so i did it using ng-deep pseudo-class selector, same for other angular component also.

test-dropdown::ng-deep .dropdown {
min-width: 20%;

test-button::ng-deep .test-button {
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
text-align: center;
cursor: pointer;
min-width: 20%;

test-date-picker::ng-deep .date {
min-width: 100%;
line-height: 1.42857143;

test-date-picker::ng-deep .date-picker {
min-width: 100%;
line-height: 1.42857143;

Extend/Override style of reusable angular2 component

For the solution 5, you need to create a subclass for the targetted component, create a custom decorator that handles / overrides the metadata and set it for the current sub component.

Here is a sample:

styleUrls: ['css/style.css']
export class OverridenComponent extends SomeComponent {

The CustomComponent decorator would look like this:

export function CustomComponent(annotation: any) {
return function (target: Function) {
var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

var parentAnnotation = parentAnnotations[0];
Object.keys(parentAnnotation).forEach(key => {
if (!isPresent(parentAnnotation[key])) {
annotation[key] = parentAnnotation[key];
var metadata = new ComponentMetadata(annotation);

Reflect.defineMetadata('annotations', [ metadata ], target);

See this question for more details:

  • Extending component decorator with base class decorator

How do I prevent Angular component styling override from carrying over to other components?

Your issue is caused by ::ng-deep, which will apply style to all .mat-input.underline elements in the page once the component has been loaded and style injected.

If you really want to keep the ::ng-deep combinator, you can add the :host selector to prefix your rule, which will target the host element and not leak the css to other components (apart from child components)

:host ::ng-deep .mat-input-underline
display: none;


Angular - How To Organize CSS Overrides Across Components For The App

You can overwrite children CSS classes from the parent componet. this is the way:

Assuming your child component have this CSS

 .child-class {
background-color: blue;

When you use this component the background color will be blue. But if you want to change that color to RED. In the parent component where you want the change you need to do this:

In your parent component

:host {
.child-class {
background-color: red;

:host this refers to the component's HTML tag (that is created by Angular, in your case the tag of the component that contains the app-custom-button). Also you can apply css to the component tag.

for example:

width: 100vw;
height: 100vh

And with ::ng-deep you can overwrite ALL styles inside your compoent. Does not matter if is a style from your child compoenent, grandchild, great-great-grandson, etc... even if its a component from an external library.

So... For example you can have the "custom background color as blue" then in one component you can keep that color but in other component you can change the color to red and in other component you can change the color to green....

Related Topics

Leave a reply