Angular кнопка материала не имеет стилизации с темой

Question

Привет, поэтому я использую angular материал для стилизации кнопки с использованием готовой темы. Однако кнопка не выглядит стилизованной. Я думал, что, может быть, мне не хватает какого-то модуля, но все выглядит хорошо для меня. Я также пытался использовать пользовательскую тему безрезультатно.

Styles.s css:

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

theme.s css:

@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 { }