'How to change a <app-component> css inside other component Angular

I have this side-bar component and I'm using it in some pages. I'm calling () but it doesn't render the css .center:focus when switching pages(I wanted a hover on the div of the page where I am), so I wanted to know if it's possible to change the css of this component on the page I called it or if there is an easier way to do it.

side-bard component

<div class="center" tabindex="1" [routerLink]="['/dashboard']">
    <mat-icon>dashboard</mat-icon>
    <p>Dashboard</p>
</div>
<div class="center" tabindex="2" [routerLink]="['/food&drinks']">
    <mat-icon>fastfood</mat-icon>
    <p>Food & Drinks</p>
</div>
<div class="center" tabindex="3">
    <mat-icon>payment</mat-icon>
    <p>Bills</p>
</div>

sidebar scss

.center:focus{
background-color: #ffca40;
border-radius: 15px;
padding-left: 10px;

}

calling for it in another page (where I wanted to change side-bar css).

<app-side-bar>
htmlcssangular


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions