如何更改角度组件中 mat-checkbox 的角度材质复选框的 css

Question

我正在开发 Angular 10 应用程序。

我有一个组件，其模板包含有角度的材料垫复选框。检查浏览器页面，复选框具有以下类

.mat-checkbox-inner-container {
    display: inline-block;
    height: 16px;
    line-height: 0;
    margin: auto;
        margin-right: auto;
        margin-left: auto;
    margin-right: 8px;
    order: 0;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    width: 16px;
    flex-shrink: 0;
}

我想将复选框向下移动 5px。我的组件有其正确的 scss 文件，我在其中应用以下类

  .mat-checkbox-inner-container {
    top: 5px !important;
  }

但这不起作用。怎么才能做到这一点，同时，如果您能给我详细的解释，谢谢。

当我手动添加“top: 5px !important;”时 浏览器中 .mat-checkbox-inner-container 类中的属性，它可以工作。

Answer 1

https://angular.io/guide/component-styles

尝试`

::ng-deep {
.mat-checkbox-inner-container {
    top: 5px !important;
  }
}

`

但使用 ng-deep 并不是一个好的做法。

将 ::ng-deep 伪类应用于任何 CSS 规则会完全禁用该规则的视图封装。任何应用了 ::ng-deep 的样式都会成为全局样式。

如果您想覆盖材质样式，请将它们写入文件中的全局 styles.scss级别