如何添加 Angular Material 组件的特定样式

Question

我目前正在为我的应用程序使用 Angular Material，但某些样式覆盖了我正在使用的模板的样式。他们实际上是很多类受到影响的人。

我只是想添加我需要的组件的样式。我个人需要来自此 Angular Material.

的 BottomSheet 和 Dialog 组件

我发现你可以在他们的文档中使用他们的主题选项添加 Angular Material 的特定样式，但是当我添加 的样式时BottomSheet 和 Dialog 到我的 styles.scss 文件，我没有看到任何东西，因为我没有 cdk-overlay-container 的样式，但是我无法找到具有这些样式的 scss 文件以将它们添加到我的 styles.scss 文件中。

到目前为止，这是我在 styles.scss 文件中的代码：

@import '~@angular/material/theming';

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

@include mat-bottom-sheet-theme($candy-app-theme);
@include mat-dialog-theme($candy-app-theme);

关于如何解决这个问题有什么想法吗？谢谢！

Answer 1

对于那些面临相同问题的人，只是尝试添加需要此 cdk-overlay-container 样式的特定组件。你只需要用这个库添加 scss 文件，只需将它添加到你的 styles.scss:

@import '~@angular/cdk/overlay-prebuilt.css';

如何添加 Angular Material 组件的特定样式

How to add specific styles of an Angular Material component

material-design

angular