angular - mat-form-field 始终显示在 Angular Material 中的其他元素下

Question

我在 mat-card 内实现材料 mat-form-field 时非常挣扎。我创建了一个全新的解决方案来演示我的问题。例如，我正在尝试添加两张垫卡。一个高于另一个。例如，第一张卡片内部有一个 mat-form-field，另一张卡片有一个图像。这很好用。但是当我点击 mat-form-field 时，选择选项会以全尺寸显示在页面底部。这是最简单的实现。在 Firefox 和 chrome 上测试。

<div fxFlex=25%>
<mat-card>
  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option </mat-option>
    </mat-select>
  </mat-form-field>
</mat-card>
<mat-card>
  <img mat-card-image src="http://images.all-free-download.com/images/graphiclarge/harry_potter_icon_6825007.jpg">
</mat-card>
</div>

我尝试过不同的方法，例如：css 样式、fxLayout="column"、fxFill、放置 i div 容器等等。是的，我的 BrowserAnimationsModule 已加载。他们也没有错误。

Answer 1

好的，我找到了解决方案！您必须在您的 styles.css 文件中添加一个预构建主题！

我已将此代码添加到我的全局 styles.css

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";