CODEWITHSUNDEEP
cssangularsassangular7angular-material2
delpo
delpo

Reputation: 239

Pierce component style globally

I need to pierce the styles of my component from the global styles.scss file.

Basically, I've used mat-card component wrapped in a custom-component. In some cases, I want to change styles to the mat-card when a custom-component is preceded by another custom-component

The idea would be:

global-styles.scss

custom-component ~ custom-component::ng-deep { 
    .mat-card {
       background-color: red;
    }
}

The host-context seemed like a good idea, I tried it this way

custom-component.scss

// does not work
host-context(~custom-component) { background-color: red; }

I've tried this and some other combinations, but they don't seem to work. How are we supposed to use the >, ~, + selectors to style angular components?.

Cheers

Upvotes: 0

Views: 119

Answers (2)

delpo
delpo

Reputation: 239

Ok not a solution for this, but there's one thing to consider.

If you want to apply styles to your component using the selector your-component, you have to set display: block; property in your component :host. I totally missed this, but it would look like this:

your-component.css

:host {
  display: block;
}

your parent component css

your-component ~ your-component {
  margin-top: 15px;
}

And it works. My problem was originally related to that.

Upvotes: 0

wickdninja
wickdninja

Reputation: 1039

Personally I avoid piercing selectors at all costs. It breaks the entire component model, and tightly couples code.

I would approach this in a slightly different way. I would have my custom-component have an optional Input() embedded = false

Your usage could be as follows:

// top level
<custom-component></custom-component>

// nested level
<custom-component [embedded]="true"></custom-component>

Then use ngClass with the embedded property to trigger the color change.

See docs for more info on ngClass https://angular.io/api/common/NgClass

Upvotes: 1

Related Questions