Angular 5 Custom CSS - css

Question

Hey guys so im struggling to figure out how to add custom styles to elements for different pages
If i add the styles to the global css it works.
For example i use ui-carousel on three different pages and i need them to look different on each, so global wont work for me in this case
If i put a div class in my indiviudal css pages it works fine as i can name the class.
<h3 style="margin-left: 20px;">Fotos</h3>
<p-carousel numVisible="4"
[value]="_photos">
<ng-template let-p pTemplate="p">
<p>
<img style=" width: 100%;
padding: 4px;
/* margin: auto; */
border: 1px solid #ddd;"
[src]="p.photo">
</p>
</ng-template>
</p-carousel>
Any help appreciated

Answer 1

Let us understand your query first -
You want to change the css styling of element or component in different places.
For this you following options -
#Input inline css
If you have just few properties you want to update then you can opt for inline css.
#Input Style Class
If you have set of themes that you want to apply on the component, then you can go with the CSS Class option as #Input
There are some more advance option like Dynamic Template but I don't think you need that.
Overwrite CSS
To overwrite css you can use :host or :host ::ng-deep
Examples :
:host >>> .ui-dropdown-item {...}
or
:host ::ng-deep .ui-dropdown-item {...}
You can see the demo in action here - https://stackblitz.com/edit/angular-wz8iq4

Answer 2

You can have style-sheet corresponding to each component you create. Specify which stylesheet you want to use for a component while declaring the component:
e.g.
#Component({
selector: 'your-component-selector',
templateUrl: './your-component.html',
styleUrls: ['./your-component.css']
})
You can have multiple stylesheets for a component using the styleUrls array.
Hope it helps!

Answer 3

I think you might need to explain your question a little bit if #alokstar's answer is not what you need, because that is how I would do it as well.
If you have a CSS file for each component, plus the global one, and you specify which stylesheet you want to use in which component, there wouldn't be a problem.
p-carousel {
<some css styling>;
}
I think this article link explains it pretty well too.

Answer 4

Please see this link
Apply CSS Style to child elements
Possible solution would be to apply a custom class name to each instance on a div wrapper or the element itself. You may also need to apply ::ng-deep but ultimately you need some sort of identifier to make them a unique 1:1 to the css you want to apply.
<p-carousel class="classInstance1 " numVisible="4"
p-carousel.classInstance1 .ui-carousel {
position: relative !important;
padding: 0.683rem !important;
border: none !important;
background: white !important;
}
p-carousel.classInstance2 .ui-carousel {
position: relative !important;
padding: 0.683rem !important;
border: none !important;
background: green !important;
}