Blazor WASM动态渲染HTML时，如何规避MudBlazor全局样式保留默认样式

方法1：为动态HTML添加专属容器并恢复默认样式 #

这是最安全且推荐的方案，通过给动态渲染的HTML包裹一个专属容器，利用CSS的revert属性恢复浏览器默认样式：

1. 在Blazor组件中给MarkupString添加容器：

<div class="custom-article-content">
    @((MarkupString)YourArticleHtmlFromDb)
</div>

2. 在全局CSS文件（如wwwroot/css/app.css）或组件的<style>块中添加样式：

/* 重置容器内所有元素为浏览器默认样式 */
.custom-article-content * {
    all: revert;
}

/* 可选：针对特定元素做微调，确保样式符合预期 */
.custom-article-content ul {
    list-style-type: disc;
    padding-left: 1.5em;
}

.custom-article-content ol {
    list-style-type: decimal;
    padding-left: 1.5em;
}

.custom-article-content p {
    margin: 1em 0;
}

all: revert会让元素恢复到浏览器的用户代理样式（即原生默认样式），比initial更贴合编辑器里的显示效果，因为initial只是回到CSS规范的初始值，未必和浏览器默认一致。

方法2：禁用MudBlazor的全局CSS重置（不推荐） #

如果确定不会影响其他MudBlazor组件的样式，可以直接关闭全局重置：

在Program.cs中修改MudBlazor配置：

builder.Services.AddMudServices(config =>
{
    config.Styles.ResetCss = false;
});

注意：这种方式风险较高，MudBlazor的组件设计依赖全局重置来保证跨浏览器的样式一致性，关闭后可能导致组件布局错乱。

方法3：手动复刻浏览器默认样式 #

如果不想使用revert，可以手动为常用HTML元素设置默认样式，比如：

.custom-article-content h1 {
    font-size: 2em;
    margin: 0.67em 0;
    font-weight: bold;
}

.custom-article-content h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
    font-weight: bold;
}

.custom-article-content ul {
    list-style-type: disc;
    padding-inline-start: 40px;
}

/* 按需添加其他元素的默认样式 */

这种方式需要覆盖更多元素，但能更精准控制样式细节。

内容的提问来源于stack exchange，提问作者magino