Angular Material Sidenav CSS not applied

Question

My Angular Material sidenav is not having its CSS applied. Any idea of what's wrong?

Component CSS:

.nav-title {
    color:orangered ;
    font-weight: 500 ;
}

.orange {
    border-top-style: solid ;
    border-top-color: orangered ;
    border-top-width: 2px ;
}

Component HTML

    <mat-sidenav-container>

                <mat-sidenav #sidenav mode="side" 
                             [fixedInViewport]="'true'" [fixedTopGap]="'0'"
                             [fixedBottomGap]="'0'">



                             <app-navigation></app-navigation>



            </mat-sidenav>


            <mat-sidenav-content >


                    <nav class="uk-navbar-container orange" uk-sticky="bottom: #offset" uk-navbar>
                            <div class="uk-navbar-left uk-padding-small"><button (click)="sidenav.toggle()" class="uk-button uk-button-text  uk-margin-small-right" type="button" ><span uk-icon="icon: menu; ratio: 2" ></span></button><div class="nav-title">{{ title }}</div></div>
                            <div class="uk-navbar-center"></div>
                            <div class="uk-navbar-right"></div>
                        </nav>

                    <router-outlet></router-outlet>

            </mat-sidenav-content>

Any guidance would be much appreciated.

Thank you!

On compiled code, could you find out `.nav-title` and check if it is on it ? — Yanis-git, Dec 07 '19 at 18:12

score 1 · Accepted Answer · edited Dec 08 '19 at 06:01

if you want to add the classes in your component css you need to do it by ::ng-deep or you need to add the classes in your global css file styles.css

Please try with thoes exaples

in component.css

::ng-deep .nav-title {
    color:orangered !important;
    font-weight: 500  !important;
}

::ng-deep .orange {
    border-top-style: solid  !important;
    border-top-color: orangered  !important;
    border-top-width: 2px  !important;
}

in styles.css

.nav-title {
    color:orangered !important;
    font-weight: 500  !important;
}

.orange {
    border-top-style: solid  !important;
    border-top-color: orangered  !important;
}

score 0 · Answer 2 · answered Dec 07 '19 at 17:21

0

Looks like you forgot . before the css class selector:

.nav-title {
    ...
}

.orange {
    ...
}

answered Dec 07 '19 at 17:21

igor_c

1,200
1
8
20

Thanks for the answer - even with the dot, the classes are not being taken into account. It's very odd. – user1797508 Dec 07 '19 at 17:56
@user1797508 can you please create a stackblitz example with the problem? – igor_c Dec 07 '19 at 19:32

Angular Material Sidenav CSS not applied

2 Answers2

Linked