Override Readonly/Disable Styling/CSS

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.

It looks like you want read-only. Read-only and disabled are two different things. If you want read-only, use <input readonly="true">.