Blazor CSS 隔离不会覆盖 Bootstrap 样式答案

【问题标题】：Blazor CSS isolation doesn't override Bootstrap stylesBlazor CSS 隔离不会覆盖 Bootstrap 样式
【发布时间】：2021-03-27 23:10:30
【问题描述】：

我的组件名称是 Account.razor

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

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

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

【问题讨论】：

您能否提供更多包含您的工具提示的.razor 文件？如果有子组件，可能会遇到需要使用::deep的情况。
我建议您检查浏览器的开发工具以确定 CSS 的加载顺序。并检查是否已加载相关文件。确保在 Account.razor 文件中包含指向 CSS 文件的链接。
为了以防万一，需要检查几件事：浏览器有时会大量缓存静态文件，因此请尝试使用 ctrl-f5 强制重新加载以清除缓存。另外，这可能是一个愚蠢的问题，但您没有在 .css 文件中包含“
我也注意到了这一点。我从 3.1 升级到 5.0，我注意到升级说明中有一些关于更新 CSS 内容的 cmets，我忽略了这些内容。我猜这可能与它有关？
@Marius 当我进入开发人员工具时，工具提示没有我组件的覆盖 css 代码。但其他元素，如 div、span，确实有在同一个 css 文件中的覆盖代码

【解决方案1】：

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

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

【讨论】：

你在（1）中提到的文件存在，有我的组件的相应css代码的文件。 _host.cshtml 的标头中还有 css 引用，我也尝试将它放在组件的开头，但它也不起作用。有趣的是，我可以覆盖一些类，如 div、span 等，但不能覆盖引导组件。正如我在开头提到的那样。它只能通过将样式放在组件内来工作。
我覆盖的 div 元素具有文件“b-yl7tycy5rc”中的代码，但工具提示元素没有，这两个覆盖位于同一个 css 文件中
我想我找到了问题所在。当tooltip元素出现时，它的html代码被添加到“page”类所在的div之外，那么它就不再具有组件的css的作用域了，因为它在它之外

【解决方案2】：

我发现了问题。当 bootstrap tooltip 元素出现时，它的 html 代码被添加到了“page”类所拥有的 div 之外，然后它不再具有组件的 css 的范围，因为它在它之外

【讨论】：