On Wednesday, February 28, 2018 at 4:05:52 AM UTC+1, Warwick Price wrote:
>
> To enable the parent to still be able to override the styling on these
> components
>
>
I think you might want to reconsider this. CSS works better and is waaaaay
easier to deal with when you work the other way around: have a global
theeming stylesheet and then only override things in the component if you
need to. Nothing stops you from having a global CSS file with a theme, and
then only override locally when you need.
So, e.g. global style:
.dark-badge {
color: #bfbfbf;
background-color: #404040
}
and then local style:
.darker-badge { // or just .dark-badge again
color: #efefef;
background-color: #101010;
}
Then in your component you have:
<app-badge class="dark-badge" [ngClass]="{ darker-badge:
whateverInputPropertyCondition }"/>
As Sander says, view encapsulation is the key here. It makes sure that any
styles you write in your component *only apply to your component *by
default. You can let those styles leak, or you can even cheat with things
like */deep/ .child-class {};* but that is usually done in some edge cases
you don't know about.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
