一页上有两个Mat菜单，分别控制两个菜单的位置

Question

下面有这两个菜单。我想控制两个mat菜单(它们的覆盖(的cdk覆盖连接位置边界框css属性，并对齐一个菜单对齐项目：flex start和其他对齐项：flex端

我已尝试在本地scss文件中设置align项属性。

.cdk-overlay-connected-position-bounding-box {
align-items: start !important;
}

但是，由于cdk覆盖是一个共享类，因此这两个菜单的align项属性都会被覆盖。我也尝试过使用两个独立的组件，但是！important编译后覆盖css，并且两个菜单都有对齐的项目开始或结束。

如何分别隔离两个菜单的位置？请查看堆叠链接

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

<div class="container">
<div>
<button mat-button [matMenuTriggerFor]="menu">Menu One</button>
<!-- #enddocregion mat-menu-trigger-for -->
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
<div>
<button mat-button [matMenuTriggerFor]="menuTwo">Menu Two</button>
<!-- #enddocregion mat-menu-trigger-for -->
<mat-menu #menuTwo="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
</div>

https://stackblitz.com/edit/angular-vgmphw?file=src/styles.scss

Answer 1

这是有效的，但它使您依赖于mat菜单的实现细节，这并不理想：

在两个菜单中都添加backgroundClass输入

<div class="container">
<div>
<!-- ... -->
<mat-menu #menu="matMenu" [backdropClass]="'first'">
<!-- ... -->
</div>
<div>
<!-- ... -->
<mat-menu #menuTwo="matMenu" [backdropClass]="'second'">
<!-- ... -->
</div>
</div>

用相邻的同级组合子(+(瞄准正确的菜单

.first+.cdk-overlay-connected-position-bounding-box {
align-items: start !important;
background-color: blue !important;
}
.second+.cdk-overlay-connected-position-bounding-box {
align-items: end !important;
background-color: green !important;
}

堆叠闪电战：https://stackblitz.com/edit/angular-vgmphw-bqqjau

Answer 2

我觉得你可以在styles.scss 中创建两个类

.left button.mat-menu-item{
text-align:left
}
.right button.mat-menu-item{
text-align:right
}

然后给"；垫子菜单"；

<mat-menu #menu="matMenu" class="left">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<!--add xPosition before-->
<mat-menu #menu="matMenu" class="right" xPosition="before">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>

堆叠式