DEV Community

Discussion on: Angular 10 - Avoid using ::ng-deep (ngdeep)

View post
 
jwp profile image
John Peters • • Edited

Okay just figured out another clue to this puzzle, in the data below this is how the browser style page show the order. Material Components do late CSS binding somehow, it makes things hard to fix because those styles have highest specificity.

.mat-button[disabled], .mat-icon-button[disabled], .mat-stroked-button[disabled], .mat-flat-button[disabled] {
    cursor: default;
}

<style>
.mat-icon-button {
    padding: 0;
    min-width: 0;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    line-height: 40px;
    border-radius: 50%;
}
<style>
.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
    box-sizing: border-box;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    outline: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: baseline;
    text-align: center;
    margin: 0;
    min-width: 64px;
    line-height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    overflow: visible;
}

// This was ::ng-deep but only !important made it work

.mat-icon-button {
    width: 1em !important;
    height: 1em !important;
}

They say don't use important but I know of no other way to get my style rules to the top other than setting them in javascript at the element layer which is at the top of rule list. Everything else was intrinsic to the material controls.