垫按钮样式不适用于对话框组件答案

【问题标题】：Mat button style not applying in dialog component垫按钮样式不适用于对话框组件
【发布时间】：2021-06-30 17:15:57
【问题描述】：

我有对话框组件，里面有两个垫子按钮，但由于某些原因垫子按钮样式不适用。按钮样式在其他组件中有效，但我不确定为什么它不适用于此对话框组件。

    <button mat-raised-button color = "primary"(click)="onNoClick()" style="margin-left:100px;">No, I'm still working.</button>
    <button mat-raised-button color = "primary"(click)="onNoClick()" style="margin-left:100px;">No, I'm still working.</button>

我已经在 app.module.ts 和 material.modules.ts 文件中导入了但不确定

app.moudles.ts

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

  imports: [
    MatButtonModule,
]
  exports: [MatButtonModule],

material.modules.ts

import { MatButtonModule } from '@angular/material/button';
@NgModule({
  imports: [
    MatButtonModule,
}
  exports: [
    MatButtonModule,
}

有什么建议吗？谢谢

【问题讨论】：

你在哪里声明你的对话框组件？在任何模块中，该模块都需要以某种方式直接或通过共享模块导入 MatButtonModule

标签： angular angular-material

【解决方案1】：

如果您在 单独的组件 中使用对话框并且该特定组件在您的 app.module.ts 文件中未导入，则不会应用样式。

很可能在您重新创建组件后（假设您使用 Angular CLI - ng generate 组件），自动为您添加了导入。

同时确保在添加新导入后停止并保留应用程序（ng serve 或等效）。

【讨论】：

【解决方案2】：

我看到你不使用 MatDialog。因此，我认为问题与未完全配置的材料有关。
你有没有在style.scss文件中设置材质主题？如果还没有，请尝试在 style.scss 文件的顶部添加这一行：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

如需进一步阅读，请查看此link。

【讨论】：

感谢您的评论。我只是创建新组件，使用完全相同的代码并且它可以工作。哈哈。我不确定为什么它不适用于旧组件.. 哈哈

【解决方案3】：

我刚刚遇到了一个类似的问题，我的 Material 按钮在对话框组件中的样式不正确。

我最初使用 Angular CLI 在错误的文件夹中创建了对话框组件，因此我将其删除并在正确的位置重新创建。这一定是在 CLI 中引起了一些问题，这意味着应用程序模块的自动导入没有发生。

在我将对话框组件导入app.module.ts 并将其添加到imports 和entryComponents，然后停止应用程序并再次使用ng serve 后，按钮的样式正确。如果您使用的是 Angular 9+，则需要重新启动应用程序。

【讨论】：