Angular - 如何从 mat-list-text 中删除 padding-right？

Question

我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码：

<mat-selection-list
  [multiple]="false"
  [class.selected]="currentItem"
  formControlName="itemListControl"
>
  <mat-list-option
    *ngFor="let item of items"
    [value]="item.id"
  >
    <div style="display: flex; justify-content: space-between; align-items: center">
      <div style="display: flex; align-items: center">
        {{ item.name }}
      </div>
      <button mat-icon-button>
        <mat-icon>edit</mat-icon>
      </button>
    </div>
  </mat-list-option>
</mat-selection-list>

当我在浏览器中检查站点时，我可以看到有一个 16px 的填充，它将按钮移动到列表项内的左侧：

我已经尝试通过将其添加到组件的 scss 文件中来删除它：

.mat-list-item {
  padding-right: 0 !important;
}

由于某种原因，这没有任何效果。看起来这甚至根本没有应用于该元素。我做错了什么以及如何摆脱这种填充（不会造成任何潜在的不良副作用）？

Answer 1

请按如下方式使用。会起作用的。

.mat-list-text {
  padding-right: 0 !important;
}

谢谢！

Answer 2

使用整个选择器（而不是仅仅使用 .mat-list-text，复制上图中突出显示的 css 的所有选择器部分）来删除填充，角度材质很难修改。不要忘记添加 !important 。我以前必须这样做。我希望它也对你有用。

Answer 3

步骤1 在您的 component.ts 文件中添加：

encapsulation: ViewEncapsulation.None

步骤2 在你的 css 文件中添加新的类自定义选项：

.mat-list-option.mat-list-option.custom-option {

   .mat-list-text {
     padding-right: 0px !important;
   }
}

步骤3 在您的 .html 文件中将新类添加到您的 mat-list-option 中：

<mat-list-option
...
class="custom-option">

（注：这是在 Angular V15 上测试的）