如何在angular素材中用input降低mat-icon？

Question

這是我的代碼：

<mat-form-field>
  <input type="tel" matInput placeholder="Home">
  <mat-icon matSuffix svgIcon="home" class="mdi-icon"></mat-icon>
</mat-form-field>

這是結果：

正如所見，圖標太高，我想降低它以減少底線和圖標之間的距離。 我試過了：

  .mdi-icon {
    margin-bottom: -5px;
  }

但這沒有幫助。 誰能說怎么做？

Answer 1

要使 CSS 對子組件產生任何影響，您首先需要先繞過視圖封裝。 視圖封裝將為模板中的所有 HTML 元素添加一個唯一屬性，例如_ngcontent-nvb-c74="" ，然后它將 append 該標識符添加到您的所有 CSS ，例如[_ngcontent-nvb-c74] 。 這就是一個組件的CSS不影響其他組件的方式。

---

我們需要使 CSS全局化。 所以，我們需要使用一個獨特的選擇器，否則你的 CSS 會泄漏到其他組件中。 我個人會使用組件名稱。 我使用app-my作為組件MyComponent的示例選擇器。 因此，在所有三種情況下，您的 CSS 將如下所示：

app-my .mdi-icon {
   ...
}

繞過 View Encapsulation 的選項有：

1. 禁用組件的視圖封裝——通常不推薦

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})
export class MyComponent {}

這使得該組件中的所有CSS 成為全局組件，如果您希望在組件的其他區域中進行視圖封裝，則效果不佳。

2.把你的CSS放到styles.css

默認情況下，此文件中的任何 CSS 都是全局的。

3.為該組件新建一個全局樣式文件

像my.component.global.css這樣的東西

創建此文件后，您需要將其添加到angular.json中的styles數組。 該數組中的任何 CSS 文件都是全局應用的，默認情況下styles.css是唯一的。

angular.json

            "styles": [
              "src/styles.scss",
              "src/app/my.component.global.css"
            ],

如果您使用的是 scss，則可以將此文件導入styles.scss而不是將其添加到styles數組。

---

現在實際移動圖標，我只是使用非 svg 圖標，但它應該工作相同

<mat-form-field>
  <input type="tel" matInput placeholder="Home" />
  <mat-icon class="mdi-icon">home</mat-icon>
</mat-form-field>

我刪除matSuffix

app-my .mdi-icon {
  position: absolute;
  right: 0;
  top: 5px;
}

在某些情況下，您將覆蓋孩子中已經存在的其他 css，為此，您可能需要通過重復 class 來提高特異性（在這種情況下沒有必要）

app-my .mdi-icon.mdi-icon.mdi-icon {
  position: absolute;
  right: 0;
  top: 5px;
}