如何在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;
}