Question

我的Angular Material sidenav没有应用CSS。有什么问题的想法吗？

组件CSS：

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

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

组件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>

任何指导将不胜感激。

谢谢！

Answer 1

看起来像您在css类选择器之前忘记了.：

.nav-title {
    ...
}

.orange {
    ...
}

Answer 2

如果要在组件css中添加类，则需要通过::ng-deep完成，或者需要在全局css文件styles.css中添加类

请尝试一下！

在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;
}

在styles.css

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

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

角材料Sidenav CSS未应用

2 个答案: