79362604

Date: 2025-01-16 17:52:22
Score: 0.5
Natty:
Report link

For Angular 18+ I use the appropriate overrides mixin for customization of angular material components. For example, to make the border width 4 add this to your styles.scss file and override the outlined-outline-width and/or outlined-focus-outline-width varriables :

@use '@angular/material' as mat;

html,
body {
  @include mat.form-field-overrides((
    outlined-outline-width: 4px,
    outlined-focus-outline-width: 4px
  ));
}

I would avoid overriding classes because those classes are NOT part of an API and are subject to change so could break if you upgrade. There are a variety of variables that can be overridden. I look at this file and search on overrides to see the various mixins: node_modules@angular\material_index.scss

Then you can find the scss file for a form fields. For example the form-fields-override:

@forward './form-field/form-field-theme' as form-field-* show form-field-theme, form-field-color, form-field-typography, form-field-density, form-field-base, form-field-overrides;

Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @forward
  • Low reputation (1):
Posted by: Sean Segura