Angular: Material custom theme doesnt apply in input field

Question

I have the following material custom sass file:

@import '../node_modules/@angular/material/theming';
@include mat-core();

$app-primary: mat-palette($mat-red, 700, 800);
$app-accent: mat-palette($mat-red, 700, 800);
$app-warn: mat-palette($mat-red, 700, 800);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

$app-input-primary: mat-palette($mat-red, 100, 200);
$app-input-accent: mat-palette($mat-red, 100, 200);
$app-input: mat-light-theme($app-input-primary, $app-input-accent);


@include mat-core-theme($app-theme);
@include mat-checkbox-theme($app-theme);
@include mat-radio-theme($app-theme);
@include mat-input-theme($app-theme);

The styles apply correctly to the checkbox and the radiobox, but do not apply in the input fields.

This is how I define the input field:

<md-form-field>
    <input mdInput placeholder="Card holder name">
</md-form-field>

The image below shows that the red style is applied to the radio, but the input loses the styles

If I change the broken-down includes with the one-liner @include angular-material-theme($app-theme); the red style works on the input, but my idea is to have a different palette for the input fields.

Please see if your input styles are not being overridden with some other css — FAISAL
– FAISAL, Commented Sep 25, 2017 at 9:36
@Faisal, no they are not. :/. I dont have any custom styling for the inputs at this point — callback
– callback, Commented Sep 25, 2017 at 9:40

FAISAL · Accepted Answer · 2017-09-25 09:49:26Z

7

Input field is part of the <md-form-field>. Add the following in your custom sass file:

@include mat-form-field-theme($app-theme); // Form-Field theme
@include mat-input-theme($app-theme);      // Input Theme

answered Sep 25, 2017 at 9:49

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arj · Accepted Answer · 2021-08-11 09:16:28Z

1

Note that if you use the @use and as mat like: @use '~@angular/material' as mat;

Then you need to use

  @include mat.core-theme($default-theme);
  @include mat.button-theme($default-theme);
  @include mat.form-field-theme($default-theme); // Form-Field theme
  @include mat.input-theme($default-theme);      // Input Theme
  @include mat.checkbox-theme($default-theme);   // Checkbox Theme

answered Aug 11, 2021 at 9:16

Arj

855 bronze badges

Comments

Morlo Mbakop · Accepted Answer · 2022-06-13 19:18:20Z

0

for Angular 14, we can apply the theme to all components.

@include mat.all-component-themes($app-theme);

answered Jun 13, 2022 at 19:18

Morlo Mbakop

3,79623 silver badges23 bronze badges

1 Comment

Muhannad Over a year ago

The documentation recommends this if you are using all the components. Otherwise, you are just adding unused css to the client browser.

Collectives™ on Stack Overflow

Angular: Material custom theme doesnt apply in input field

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related