Blazor CSS 隔离不会覆盖 Bootstrap 样式

Blazor CSS isolation doesn't override Bootstrap styles

我的组件名称是Account.razor

这一行在 .razor 组件中运行良好

<style>
    .tooltip-inner {
        background-color: red;
    }
</style>

但是当创建 Account.razor.css 并放置相同的代码时，工具提示不会改变背景颜色。

检查以下内容（用你的项目名称代替我的 (Blazor.Starter) :

  1. 转到 \Blazor.Starter\obj\Debug\net5.0\scopedcss\bundle 并检查是否为项目生成了 css 文件，并且您的 CSS 包括在内。注意使用的id .page[b-l5khpg12dl] {..
  2. 检查您在 hosts/index 文件中引用 CSS - <link href="Blazor.Starter.styles.css" rel="stylesheet" />
  3. 在浏览器中检查 html 和 类 并确保您可以看到项目 CSS 文件以及组件生成的 Html 的 ID 是相同。如果不清理并重建 project/library.

我发现了问题。当 bootstrap 工具提示元素出现时，它的 html 代码被添加到“页面”class 所具有的 div 之外，然后它不再具有组件的 css因为它在外面