Question

我想对以下代码进行一些更改...不幸的是，它不起作用:(您能告诉我我需要添加到代码中的内容吗。

// Standard style from Angular Material
.mat-toolbar-row, .mat-toolbar-single-row {
    display: flex;
    box-sizing: border-box;
    padding: 0 16px;
    width: 100%;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}

// My Code
/deep/ .mat-toolbar-row, .mat-toolbar-single-row {
padding: 0 5px !important;
}

Answer 1

/deep/选择器已弃用。

不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

我建议您仅将一个类添加到工具栏：

<mat-toolbar class="custom-toolbar">With Padding</mat-toolbar>

，然后为该类设置CSS：

.custom-toolbar {
  background-color: red;
  padding: 0 5px;
}

我在这里为您创建了一个小示例：

https://stackblitz.com/edit/angular-h7acrk

如何在mat-toolbar-row中更改样式？

1 个答案: