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

问题描述 投票:0回答:3

我正在尝试向 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;
}

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

html angular sass angular-material angular12
3个回答
1
投票

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

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

谢谢!


0
投票

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


0
投票

步骤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 上测试的)

© www.soinside.com 2019 - 2024. All rights reserved.