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

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