覆盖角材质组件 [英] Override Angular Material Component

问题描述

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

I want to override the Angular Material select component (https://material.angular.io/components/select/overview) so that I can change the appearance of the now input-field to an icon button for example. I want to do this because it should somehow work as a dropdown.

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

I already tried the overriding of the select and the component works very well like this. I saw in this answer: How to override CSS or re-skin for node_module? that I would need to create a new npm package and publish it. But the select is part of the Material package which is inside the @angular package.

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

So should I fork the whole Material project or can I just create a new package for this one part? But if I have both integrated (Material and my expanded select package) I don't think it would use the overwritten one.

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

I know that it is not really recommended to do such things and instead use something else which is better maintained. To explain you why I want to do this: We are on a very old version of Angular. We currently use ng2-bootstrap for the dropdown, as Material doesn't offer a dropdown component. But the ngx-bootstrap dropdown is very laggy in its most current version and it is blocking our Angular upgrade. Also we would like to get rid of ngx-bootstrap and just use Material.

推荐答案

使用 ViewEncapsulation 并设置 None 例如:-

Use ViewEncapsulation and set None For example:-

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

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

Any css written in app.component.css will override Angular material css

这篇关于覆盖角材质组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！