Blazor Server .NET 7组件@media打印样式无法隔离问题求助

问题原因 #

Blazor 的 CSS 隔离机制通过为组件 DOM 元素添加唯一作用域属性（如[b-xxxxxx]），并给对应 CSS 规则附加该属性选择器实现样式隔离。但@page是 CSS 的顶层打印规则，无法被作用域属性修饰，因此两个组件的@page规则会作为全局样式生效，后加载的组件样式会覆盖先加载的，最终导致所有页面打印都采用纵向（portrait）设置。

解决方案 #

方案一：通过动态控制 Body 类实现隔离 #

1. 在全局样式文件（如wwwroot/css/site.css）中添加以下规则：

@media print {
    body.print-landscape @page {
        size: landscape;
    }
    body.print-portrait @page {
        size: portrait;
    }
}

2. 修改Print.razor组件，动态添加/移除 Body 类：

@page "/print"
@inject IJSRuntime JSRuntime
@implements IDisposable

<h1>landscape</h1>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("document.body.classList.add", "print-landscape");
        }
    }

    public void Dispose()
    {
        _ = JSRuntime.InvokeVoidAsync("document.body.classList.remove", "print-landscape");
    }
}

3. 修改Print2.razor组件，同理控制对应 Body 类：

@page "/print2"
@inject IJSRuntime JSRuntime
@implements IDisposable

<h1>portrait</h1>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("document.body.classList.add", "print-portrait");
        }
    }

    public void Dispose()
    {
        _ = JSRuntime.InvokeVoidAsync("document.body.classList.remove", "print-portrait");
    }
}

方案二：组件内动态注入打印样式（可选） #

若不想修改全局样式，可在组件渲染时动态创建样式元素，销毁时移除：

Print.razor示例：

@page "/print"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<h1>landscape</h1>

@code {
    private IJSObjectReference? _styleElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _styleElement = await JSRuntime.InvokeAsync<IJSObjectReference>("document.createElement", "style");
            var printStyle = "@media print { @page { size: landscape; } }";
            await _styleElement.InvokeVoidAsync("textContent", printStyle);
            await JSRuntime.InvokeVoidAsync("document.head.appendChild", _styleElement);
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_styleElement != null)
        {
            await JSRuntime.InvokeVoidAsync("document.head.removeChild", _styleElement);
            await _styleElement.DisposeAsync();
        }
    }
}

Print2.razor只需将printStyle中的landscape替换为portrait即可。

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