Question

我想覆盖Angular Material选择组件（https://material.angular.io/components/select/overview），以便我可以将now input-field的外观更改为图标按钮。我想这样做是因为它应该以某种方式作为下拉列表。

我已经尝试过覆盖select了，组件的效果非常好。我在这个答案中看到：How to override CSS or re-skin for node_module?我需要创建一个新的npm包并发布它。但是select是@angular包中的Material包的一部分。

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

我知道不建议做这样的事情，而是使用其他更好维护的东西。为了解释你为什么要这样做：我们是一个非常古老的Angular版本。我们目前使用ng2-bootstrap作为下拉列表，因为Material不提供下拉组件。但是ngx-bootstrap下拉列表在其最新版本中非常滞后，它阻止了我们的Angular升级。我们也想摆脱ngx-bootstrap并使用Material。

Answer 1

使用ViewEncapsulation并设置None例如： -

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

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

覆盖角度材质组件

1 个答案: