Question

我已按照以下方式完成了mat-tab定制

public function sendNewsletter(Request $request){

    $users = User::where('newsletter', '=', 1)->get();


    foreach ($users as $user){


        \Mail::to($user->email)->send(new Newsletter);
    }
    return redirect(route('admin.news'));
}

标签显示为

public function build()
{
    return $this->view('emails.newsletter');
}

我有两个问题：

墨条颜色没有变化
我有两个不同的标签组。我想以不同的方式设计它们。因此，通过上述解决方案，它基本上会全局更改所有选项卡组件如何将它们转换为特定的CSS类？我的确尝试.mat-tab-label { font-weight:300; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color:white !important; font-size:18px; opacity: 1 !important } .mat-tab-link { color:white !important; } .mat-ink-bar { background-color: white !important } .mat-tab-label-active { font-weight:300; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color:white !important; font-size:18px; opacity: 1 !important }并将其用作<mat-tab-group> <mat-tab label="Sales"> <div fxLayout="row" fxFlex="100%"> </div> </mat-tab> <mat-tab label="Service"> <h1>Some more tab content</h1> <p>...</p> </mat-tab> </mat-tab-group>，但这不起作用。

Answer 1

解决方案是使用::ng-deep覆盖默认的css属性。

所以你的CSS变成了：

::ng-deep .mat-tab-label {
     font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
}

:ng-deep .mat-tab-link {
    color:white !important;
}

::ng-deep .mat-ink-bar {
    background-color: white !important
}

ng:deep .mat-tab-label-active {
    font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
 }

关于问题的第二点，只需将这些CSS属性包装在不同的类中，并在需要的地方使用它们。

角度材料选项卡使用类定制

1 个答案: