css - Blazor 服务器端使用嵌入样式格式化 MarkupString，同时忽略 Css 文件样式

Question

我的 Blazor 服务器端应用程序发布从 Web Api Core 获取的丰富内容。
内容带有任意 Html 标签以及一组有限的众所周知的 Css 类。
Blazor 应根据这些类设置内容样式，但在匹配的 css 文件中声明时它会忽略样式。
但是，如果样式嵌入到同一 Razor 页面中，它会成功格式化内容。

以下练习演示了该问题。
是否有任何解决方法可以保留 css 文件上的样式并相应地设置标记内容的格式？

Test.razor 页面，具有嵌入样式:

@page "/Test"

<div class="FromRazorStyle">
    Razor hard coded text, embedded razor style
</div>
<div class="FromCssFile">
    Razor hard coded text, style from Css file
</div>

@((MarkupString)FromRazorStyle)
@((MarkupString)FromCssFile)

<style scoped>
    .FromRazorStyle {
        font-weight:600;
        margin-bottom:20px;
    }
</style>

@code {
    string FromRazorStyle = "<div class='FromRazorStyle'>Markup string, embedded razor style<br/></div>";
    string FromCssFile = "<div class='FromCssFile'>Markup string, style from Css file<br/></div>";
}

Test.razor.css 文件:

.FromCssFile {
    font-weight: 600;
    margin-bottom: 20px;
}

结果:
Razor 硬编码文本，嵌入式 Razor 风格
Razor 硬编码文本，样式来自 Css 文件
标记字符串，嵌入 Razor 样式
标记字符串，来自 Css 文件的样式

Answer 1

是的，这是可能的，但不一定容易!问题在于 CSS 隔离过程重写了 .razor.css 文件中的选择器以包含随机生成的唯一标识符。因此，示例中的 CSS 实际上变成了类似 .FromCssFile[b-c2x6l882ml] 的内容。此标识符还会作为属性添加到 .razor 文件中存在的所有 HTML 标记，但不会添加到标记字符串中的标记。

一种解决方法是在元素文件中手动设置此 CssScope 标识符，如 this page 中所述。 ，然后将其插入到标记内容标签中。

但是，在这种情况下，更简单的方法可能是将当前的 CSS 放入静态文件中，例如默认的 css/site.css，如下所示:

.FromCssFile * {
    font-weight: 600;
    margin-bottom: 20px;
}