角度 MatInput css答案

【问题标题】：Angular MatInput css角度 MatInput css
【发布时间】：2021-07-01 10:32:51
【问题描述】：

我在 Angular 项目中使用 Material。

我使用的所有 Material 组件都可以工作，除了 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>

enter image description here

Mat Button 工作，但 Mat Input 没有。

【问题讨论】：

您自己的全局 css 声明或其他库（例如 bootstrap）可能与全局样式定义混淆。你能确认一下吗？
我在 styles.scss 上使用主题材质 > @import '~@angular/material/theming'
但不必如此，因为即使您停用主题材料，问题仍然存在。

标签： angular angular-material

【解决方案1】：

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

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

在此之后，您应该使用带有标签的 matInput。例如：

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

引用documentation:

matInput 是一个允许原生和使用的元素。

【讨论】：