Angular Material 组件显示时没有填充。

Question

我已经创建了一个 Angular (12) 项目，并添加了 "indigo-pink" 主题的 Material，创建了一个表单。但是所有的表单组件之间都没有水平的空白间隔。为了测试，我复制了一个代码片段，来自于 Angular Material 网站上的按钮组件：

  <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"
],

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

如何修复边距？

- deamon

---

我遇到了完全相同的问题。你曾经能够找出问题吗？ - undefined

Answer 1

尝试将以下样式添加到您的组件中：

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

它可能来自导入的主题 indigo-pink.css 中缺失。

- Panagiotis Bougioukos

---

谢谢，但是它看起来和这个风格一样。 - undefined

@daemon 我在这里创建了一个示例 https://stackblitz.com/edit/angular-ivy-ss8res。当你移除我上面发布的代码时，填充效果消失了。当你添加它时，填充效果是正确的。请检查一下。不知何故，你使用我的答案添加的CSS没有被正确应用。 - undefined

你是对的：样式表没有被应用。我把它放在了src/styles.css里面，但出于某种原因它没有起作用。将CSS放入组件的CSS文件中后，看起来应该可以了。然而，据我所知，使用Angular Material时，边距应该是正确的，我担心可能存在一些更根本的问题。其他表单元素也没有间距渲染出来。 - undefined

Answer 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>

- Juan Vicente Berzosa Tejero