混合 Angular Material 和 Bootstrap。好的做法还是坏的做法？

Posted 2023-03-05

【中文标题】混合 Angular Material 和 Bootstrap。好的做法还是坏的做法？

【英文标题】：Mixing up Angular Material and Bootstrap. Good or Bad Practice?

【发布时间】：2020-05-19 16:16:05

【问题描述】：

我是 Angular Material 的新手，我可以看到它有它自己的复杂 API。我来自 Bootstrap，我一直使用它的网格系统常规类，如行、容器、 cols 等。我想知道像这样将它们混合在一起是好是坏：

    <div class="container">
<div class="row">
  <div class="col-md-6 offset-md-3">
    <form class="my-form">
      <mat-form-field class="full-width">
             <mat-label>First Name</mat-label>
             <input  matInput  placeholder="First name"  name="fname"  required>
          </mat-form-field>
          <mat-form-field class="full-width">
             <mat-label>Last Name</mat-label>
             <input  matInput  placeholder="Last Name" name="lname"  required>
          </mat-form-field>
          <mat-form-field class="full-width">
             <mat-label>Address</mat-label>
             <input  matInput  placeholder="Address" name="address"  required>
          </mat-form-field>
          </form>
  </div>
</div>
</div>

如果不是，为什么？

【参考方案1】：

如果你使用 2 个库，它可能会影响你的组件样式，而且效果不是很好。

您可以做的一件事是在 angular.json 中对导入进行排序，并将最重要的样式文件放在样式列表的末尾

"styles": [
          "bootstrap.css"
          "material.css"
          "src/styles.css" // yours css should be the last
        ]