2

I want to change the appearance of an Mat-Form-Field with the appearance "outline".

It should look something like this

So it should have a wihte background and white border.

We already tried using:

encapsulation: ViewEncapsulation.none

And then

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: white;
}

We also tried using ::ng-deep even though its deprecated.

Last Resort would be to change the whole Angular theme.

Does anyone know how to do that?

eazyennocodes
  • 31
  • 4
  • some like this [SO](https://stackoverflow.com/questions/73141542/custom-style-material-input-without-ng-deep-important/73144861#73144861) or this [another one](https://stackoverflow.com/questions/67020318/angular-material-mat-form-field-input-field-icon/67044128#67044128) ? – Eliseo Jan 11 '23 at 10:28

1 Answers1

-2

You should not update the design of a library. They're made to implement a design system. If you edit this design, what's the point of using the library ? Moreover, if you keep it up-to-date, it means you will have to update your code at every new version that changes the HTML of the component.

That aside, you should not de-encapsulate your components. This will definitely create side effects. Just put your overriding code in styles.scss.

Finally, assuming your CSS selector is correct, know that CSS selectors have what is called priority : a complex CSS selector will be applied first, compared to a simple one.

You can use this

.myClass { background-color: white !important; }

If you have no other choice, but I would suggest to avoid it, and instead create a complex selector to increase its priority.

MGX
  • 2,534
  • 2
  • 14
  • 3
    Please answer the question the OP asked rather than assume or advice on why they are doing it – Tremmillicious Apr 19 '23 at 05:39
  • I did answer on the issue. And I am free to give feedback on why this is a bad solution. I won't encourage bad practices. – MGX Apr 20 '23 at 07:48