为什么我不能将 Angular Material Design 更改为我需要的那个？答案

【问题标题】：Why I cannot change AngularMaterial Design to the one I need?为什么我不能将 Angular Material Design 更改为我需要的那个？
【发布时间】：2019-10-04 05:30:16
【问题描述】：

Angular Material 是否足够灵活，以至于我可以使用 CSS 轻松将其设计更改为我需要的设计，因为目前我尝试更改的所有内容都对我不起作用？

【问题讨论】：

感谢您的评论！我已经浏览过它，但我可以看到它不像 Bootstrap 那样灵活，对吧？您只能更改调色板

标签： angular angular-material

【解决方案1】：

查看官方文档中的Customizing Angular Material component styles，其中解释了如何更改样式。要查找要覆盖的样式，您可以查看浏览器的调试视图或查看 GitHub source 以获取样式。

这是另一个post 讨论这个有一些样本。

【讨论】：

【解决方案2】：

不过，您需要的是渗透 Angular Material 样式。为此：

1) 检查您希望覆盖的样式。

2) 生成具有更高特异性的选择器

3.1) 使用 ::ng-deep 穿透 Angular Material（已弃用）

::ng-deep .my-specific-selector.mat-button.mat-flat-button.accent {...}

3.2) 或使用封装穿透 Angular Material（将 ViewEncapsulation.None 添加到将保存样式的组件。但请注意，这会使该组件的样式穿透整个应用程序）

@Component({
  selector: 'app-whatever',
  templateUrl: './whatever.component.html',
  styleUrls: ['./whatever.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class myCustomClass {}

【讨论】：