角矩阵输入css

Question

我在一个角度项目中使用材料。

除matInput外，我使用的所有材质组件都工作。

我很好地导入了这个组件，我的印象是它被很好地检测到了，但是它的css没有被考虑进去。

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>

在此输入图像描述

垫按钮工作，但垫输入没有。

Answer 1

首先，您需要在样式中添加任何主题。scss文件。例如：

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

在此之后，您应该使用matInput与

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

引用文件：

matInput是一个指令，允许本机和元素使用