首页 新闻 会员 周边

angular material theme 样式对 button 不起作用

0
悬赏园豆:30 [已解决问题] 解决于 2022-10-03 16:49

如下所示卡片组件中 button 没有使用 indigo 与 pink 样式,请问如何解决?

app.component.html

<mat-card class="example-card">
  <mat-card-actions>
    <button mat-raised-button color="primary">LIKE</button>
    <button mat-raised-button color="accent">SHARE</button>
  </mat-card-actions>
</mat-card>

styles.scss

@use '@angular/material' as mat;
@include mat.core();

$light-app-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette, A200, A100, A400),
    warn: mat.define-palette(mat.$red-palette),
  )
));

@include mat.core-theme($light-app-theme);
@include mat.button-theme($light-app-theme);
@include mat.card-theme($light-app-theme);

页面输出效果

dudu的主页 dudu | 高人七级 | 园豆:31011
提问于:2022-10-03 16:28
< >
分享
最佳答案
0

是没有 import MatButtonModule 引起的,添加引用后立马解决

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
dudu | 高人七级 |园豆:31011 | 2022-10-03 16:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册