Angular MatInput css

Question

I’m using Material on an Angular project.

All the Material components I use work except matInput.

I import the component well and I have the impression that it is well detected as such but its css is not taken into account.

import { MatInputModule } from '@angular/material/input';
import { NgModule } from '@angular/core';
import { MatButtonModule } from "@angular/material/button";
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';


@NgModule({
  declarations: [],
  imports: [],
  exports: [
    MatButtonModule,
    MatInputModule,
    MatFormFieldModule,
    MatSlideToggleModule
  ]
})
export class MaterialModule {
}

_

    <form fxLayout="column" fxLayoutGap="1rem">
        <input type="text" mat-input />
        <input matInput>

        <button mat-flat-button>button</button>
    </form>

enter image description here

Mat Button work but Mat Input no.

It's possible that you have a global css declaration of your own or another library such as bootstrap that is messing with the global styles definitions. Can you confirm it? — monogate
I use Theming Material > @import '~@angular/material/theming' on styles.scss — Alkapoun
But it doesn't have to be that because even if you deactivate Theming Material, the problem remains the same. — Alkapoun

progm progm · Accepted Answer · 2021-04-06T00:10:10

Firstly you need to add any theme in styles.scss file. For example:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

After this you should use matInput with <mat-form-field> tag. For example:

<mat-form-field>
    <input type="text" matInput />
</mat-form-field>

Quote from documentation:

matInput is a directive that allows native and elements to work with <mat-form-field>.

Angular MatInput css

1 Answers