覆盖 Angular 材质组件答案

【问题标题】：Override Angular Material Component覆盖 Angular 材质组件
【发布时间】：2018-01-15 10:04:55
【问题描述】：

我想覆盖 Angular Material 选择组件 (https://material.angular.io/components/select/overview)，以便我可以将现在输入字段的外观更改为例如图标按钮。我想这样做是因为它应该以某种方式作为下拉菜单工作。

我已经尝试过覆盖选择并且组件像这样工作得很好。我在这个答案中看到：How to override CSS or re-skin for node_module? 我需要创建一个新的 npm 包并发布它。但是选择是 @angular 包内的 Material 包的一部分。

那么我应该分叉整个 Material 项目还是只为这一部分创建一个新包？但是，如果我同时集成了（材料和扩展的选择包），我认为它不会使用被覆盖的。

我知道不建议这样做，而是使用其他维护得更好的东西。向您解释我为什么要这样做：我们使用的是非常旧的 Angular 版本。我们目前使用 ng2-bootstrap 作为下拉菜单，因为 Material 不提供下拉组件。但是 ngx-bootstrap 的下拉菜单在其最新版本中非常滞后，它阻碍了我们的 Angular 升级。我们也想摆脱 ngx-bootstrap 并只使用 Material。

【问题讨论】：

为什么不使用 mat-menu 组件来呈现单击图标按钮的下拉菜单？ material.angular.io/components/menu/examples
谢谢你，我会试试这个，如果它符合我们的需要。
重构你的 UI 肯定比重构/扩展第三方组件更容易。 GL

标签： angular npm drop-down-menu components angular-material

【解决方案1】：

使用 ViewEncapsulation 并设置 None 例如：-

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation:ViewEncapsulation.None
})

任何用 app.component.css 编写的 css 都会覆盖 Angular 材质 css

【讨论】：

或者更好的是，使用styles.css 用于全局样式表。