angularangular-material

Override Readonly/Disable Styling/CSS

What is the right/best way to override the material design styling when disabling input fields?

Out of box disabled screenshot

Angular Material Input Examples

I was able to achieve my goal w/ the following css but is that a valid way? Seems like I'm messing with the internals of Angular Material. Is there a better way?

// override material design input field styling for readonly mode
.mat-form-field-disabled .mat-form-field-underline {
    height: 0;
}

.mat-input-element:disabled {
    color: $header-text-color;
}

modified disabled screenshot

Solution

  • Yes, this way is correct, you can just add custom CSS rules to any element from mat-input with disabled class or something similar.

    But you should know, when, to what elements and which classes Angular Material applies (in your case, for disabled inputs). With this knowledge, you can easily achieve your goals.

    And looks like you will need ::ng-deep and !important sometimes. Another thing I can suggest is to narrow the circle of target elements, to exclude affecting other elements, which you don't want to affect.