angular - How can I change styles of component in different places?

Question

I have component, that is only used in app.component.html. This footer exists on all pages. I want to change background-color of it on component. Styles of footer are in footer.component.css. So how can I do it?

Answer 1

On footer.component.css you have the original color.

If you use the footer (component name: my-footer) on app.component like this:

<my-footer></my-footer>

You can add on app.component.css some css to override the original color

my-footer ... {
    background-color: red
}