Question

嘿，所以我正在使用角度材质使用预建主题为按钮设置样式。但是，按钮似乎没有样式。我以为我可能会缺少某种模块，但对我来说一切都还好。我也尝试使用自定义主题无济于事。

Styles.scss：

   @import '@angular/material/prebuilt-themes/deeppurple-amber.css';
   @import './app/theme.scss';

theme.scss：

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

html：

        <div class="overlay">
            <div class="center overlayTextTitle">
                <span>{{info.Title}}</span>
            </div>
            <div class="center overlayTextDesc">
                <span>{{info.Description}}</span>
            </div>
            <div class="button"><button mat-stroked-button color="primary">Primary</button></div>
        </div>

angular.json：

 "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
          "node_modules/animate.css/animate.css",
          "src/styles.scss",
          "src/theme.scss"
        ],

sharedModule：

    import { WavesModule, InputsModule, ButtonsModule, CardsModule } from 'angular-bootstrap-md';
import { BuyingGuideComponent } from '../buying-guide/buying-guide.component';
import { IdeasAndInspirationComponent } from '../ideas-and-inspiration/ideas-and-inspiration.component';
import { AdviceAndGuidanceComponent } from '../advice-and-guidance/advice-and-guidance.component';
import { GuidesComponent } from '../guides/guides.component';
import { MatButtonModule } from '@angular/material/button';

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    BuyingGuideComponent,
    IdeasAndInspirationComponent,
    AdviceAndGuidanceComponent,
    GuidesComponent
  ],
  imports: [
    WavesModule,
    InputsModule,
    ButtonsModule,
    CardsModule,
    MatButtonModule,
  ],
  exports: [
    WavesModule,
    InputsModule,
    ButtonsModule,
    CardsModule,
    MatButtonModule,
    BuyingGuideComponent,
    IdeasAndInspirationComponent,
    AdviceAndGuidanceComponent,
    GuidesComponent,
  ],
  providers: []
})
export class SharedModule { }

角材质按钮未设置主题样式

0 个答案: