Angular Material 组件显示时没有填充答案

【问题标题】：Angular Material components are displayed without paddingAngular Material 组件显示时没有填充
【发布时间】：2021-07-31 20:45:24
【问题描述】：

我创建了一个 Angular (12) 项目，添加了具有“靛蓝粉色”主题的材料并创建了一个表单。但是所有表单组件都被渲染，彼此之间没有任何水平空白。出于测试目的，我使用Buttons from the Angular Material 网站复制了一个代码 sn-p：

  <section>
    <div class="example-label">Raised</div>
    <div class="example-button-row">
      <button mat-raised-button>Basic</button>
      <button mat-raised-button color="primary">Primary</button>
      <button mat-raised-button color="accent">Accent</button>
      <button mat-raised-button color="warn">Warn</button>
      <button mat-raised-button disabled>Disabled</button>
      <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
    </div>
  </section>

它们在我的应用程序中呈现如下：

但它们应该像在 Angular Material 网站上一样呈现：

样式表似乎在angular.json中正确导入：

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css"
],

未添加或修改其他全局（或本地）样式。

如何固定边距？

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

尝试将此样式添加到您的组件中

.mat-button-base {
  margin: 8px 8px 8px 0;
}

导入主题indigo-pink.css可能漏掉了

【讨论】：

谢谢，不过这个样式看起来一样。
@daemon 我在这里创建了一个示例 stackblitz.com/edit/angular-ivy-ss8res 。当您删除我在上面发布的代码时，填充将被消除。添加时，填充是正确的。核实。不知何故，您在我的答案中添加的 CSS 未正确应用
你是对的：没有应用样式表。我已将其放入src/styles.css，但由于某种原因这不起作用。将 CSS 放入组件 CSS 文件后，看起来应该如此。然而，据我所知，边距应该是正确的，开箱即用 Angular Material，我担心会有一些更根本的问题。其他表单元素也被渲染，它们之间没有间距。

【解决方案2】：

@Panagiotis Bougioukos 的解决方案运行良好。它应该对你有用，但是，如果由于某种原因它不起作用，试试这个：

.buttonflex{
  display: flex;
  justify-content: space-between;
}

<section>
    <div class="example-label">Raised</div>
    <div class="example-button-row buttonflex">
      <button mat-raised-button>Basic</button>
      <button mat-raised-button color="primary">Primary</button>
      <button mat-raised-button color="accent">Accent</button>
      <button mat-raised-button color="warn">Warn</button>
      <button mat-raised-button disabled>Disabled</button>
      <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
    </div>
  </section>

【讨论】：