CODEWITHSUNDEEP
cssangularangular-materialmat-table
user10114552
user10114552

Reputation:

How can I change the style in mat-toolbar-row?

I'd like to make some changes to the code below... Unfortunately it does not work :( Can you please tell me what I need to add to my code.

// 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;
}

Upvotes: 2

Views: 10341

Answers (1)

kacase
kacase

Reputation: 2859

The /deep/ selector is depreciated.

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

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

I suggest you just add a class to your toolbar:

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

and then set the css for that class:

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

I created a little example for you here:

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

Upvotes: 4

Related Questions