Angular CDK 菜单不会在菜单触发器旁边打开

Question

我正在尝试学习使用 Angular CDK 并在我的应用程序中创建一些组件。

该应用程序仅使用 tailwindCSS 和 daisyUI 元素插件。

我正在尝试显示带有独立触发器的基本菜单，然后使用顺风对其进行样式设置。

但是，无论我如何将其添加到任何视图中，菜单显示都会与触发按钮分离。通常位于页面或父容器的左下角。

是否有我遗漏的东西，或者顺风类之间可能存在冲突导致了这种行为？

这是页面上显示的组件，没有呈现任何其他内容：

这是添加了一个元素的：

这就是在带有 justify-center 的弹性容器内的情况：

Answer 1

看起来缺少的部分是您需要将overlay-prebuilt.css导入添加到样式表中

@import "@angular/cdk/overlay-prebuilt";

因为我没有使用任何

@angular/material

包、组件或样式表，所以没有导入它，并且在他们的示例或入门文档中没有明确说明这是正确格式化所必需的。

它可以在 Overlay | 中找到。入门，这很令人困惑，因为如果您查看菜单文档，没有提到此设置是先决条件。

希望这可以为可能面临同样问题的其他人节省一些时间。