如何在 Angular Material 中设置按钮 CSS 的样式？

Question

我输入了：

  <div class="button-row">
              <button md-icon-button><i class="material-icons">mode_edit</i></button>
              <button md-icon-button><i class="material-icons">delete_forever</i></button>
            </div>

现在它看起来像一个没有样式的普通按钮。如何设计这个？我尝试添加样式：

// Import Angular Material
@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";

Answer 1

如果您不使用 Angular CLI，您可以简单地在 index.html 文件中包含预构建的 css

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

路径取决于您的应用设置。

Answer 2

将预建样式表导入项目后，您需要在 <md-button> 中添加 color 属性，即 primary、accent 或 warn.

<div class="button-row">
  <button color="primary" md-icon-button><i class="material-icons">mode_edit</i></button>
  <button color="warn" md-icon-button><i class="material-icons">delete_forever</i></button>
</div>

demo

如果导入不成功，您可以尝试在index.html中添加此CDN:

<link href="https://unpkg.com/@angular/material/prebuilt-themes/pink-bluegrey.css" rel="stylesheet">

如何在 Angular Material 中设置按钮 CSS 的样式？

How to style button CSS in Angular Material?

angular-material2

angular