Mat-toolbar 不会采用原色

Posted 2023-02-18

【中文标题】Mat-toolbar 不会采用原色

【英文标题】：Mat-toolbar won't take primary colour

【发布时间】：2020-12-21 00:19:18

【问题描述】：

按照非常简单的步骤创建带有 sidenav 的响应式工具栏，我遇到了一个让我发疯的小问题。

来自ng generate @angular/material:navigation sideNav的基本原理图

I want the toolbar to seem to extend over the sidebar. 那里已经有一个工具栏，但在默认原理图中，它的 css 设置为继承背景：

.sidenav .mat-toolbar 
  background: inherit;

因此，如果我将其注释掉，然后将颜色添加到 <mat-toolbar color="primary">Menu</mat-toolbar>

I get this white line separating the two toolbars.

我可以在 sidenav div 之外手动制作一个工具栏，但我很确定这是错误的做法，而且我觉得有些东西非常简单明了，我没有得到。

非常感谢任何指针。

【问题讨论】：

你能检查这个链接stackblitz.com/angular/…吗？这是你所期望的？ @user2793505

这不是 mat-toolbar 的问题，而是 side-nav 的问题，具有 White bg 的类 sidenav-container 比 side nav 大一点，所以你得到那条线..你可以将容器颜色设置为主要的，如果你想

@Muthupriya 是的，这就是将工具栏放在 sidenav 之外。它有效，但我听说 sidenav 应该包裹整个页面。

【参考方案1】：

尝试从MatSidenav API 实现fixedTopGap - 这将允许您的sidenav 在您的工具栏下滑出而不会重叠