Как я могу изменить стиль в 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 (для всех 3 of / deep /, >>> и :: ng-deep). До тех пор :: 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