javascript - 如何编辑这个 Angular Material Chips CSS？

Question

我有一个 Angular 应用程序。到目前为止，我的 HTML 看起来像这样:

body
 - <div side-nav right-aligned>
  - <div #configArea>
   -- Here we have 3 fields

在此配置中，我有 3 个字段，它们来自 Angular Material。问题是，我需要其中之一才能使用 Angular Material Chips .

所以，我已经按照教程进行操作，但是这 3 个字段具有完全相同的 CSS，我需要修改一个 CSS 才能使其正常工作，但是这个 div 不存在于我的代码中，只存在于浏览器中 。为了让它工作，我必须将高度设置为“自动”，但目前没有任何效果。

This is the class CSS I have to edit

This is what happens due height bug

使用 Angular 4.4.2

Answer 1

所以我通过使用 ::ng-deep 标签解决了这个问题，并选择了我想要的 div。

这样的事情对我有用:

yes @ippi is right, css works fine on the dynamically created elements. If in angular component's css file, you might have to use :host >>> selector. And add a different css-class for each, so you can style easily. – Abhishek Kumar