Blazor WebAssembly中Razor页面CSS不生效问题求助

我正在跟随教程开发Blazor项目，Shared文件夹下的Razor页面CSS样式可正常生效，但Pages文件夹中的产品详情页CSS无法加载，图片尺寸、颜色等样式均无变化。注意到Pages文件夹中的文件带有绿色+标记，而Shared文件夹中的文件带有红色V标记。

Shared页面代码 #

@inject IProductService ProductService
@if(ProductService.Products == null || ProductService.Products.Count == 0)
{
    <span>Loading products...</span>
}
else
{
    <ul class="list-unstyled">
        @foreach (var product in ProductService.Products)
        {
            <li class="media my-3">
                <div class="media-image-wrapper mr-2">
                    <a href="/product/@product.Id">
                        <img class="media-img" src="@product.ImageUrl" alt="@product.Title">
                    </a>
                </div>
                <div class="media-body">
                    <a href="#">
                        <h4 class="mb-0">@product.Title</h4>
                    </a>
                    <p>@product.Description</p>
                    <h5 class="price">$@product.Price</h5>
                </div>
            </li>
        }
    </ul>
}
@code {
    protected override async Task OnInitializedAsync()
    {
        await ProductService.GetProducts();
    }
}

Shared页面对应的CSS文件 #

.media-img{
    max-height: 200px;
    max-width: 200px;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: transform .2s;
}
.media-img:hover{
    transform: scale(1.1);
}

.media{
    display:flex;
    align-items: flex-start;
}
.media-body{
    flex: 1;
    margin-left: 20px;
}

media-img-wrapper{
    width:  200px;
    text-align: center;
}


@media(max-width: 1023.98px)
{
    .media{
        flex-direction: column;
    }
    media-img-wrapper{
        width: 100%;
        height: auto;
    }
}

Pages文件夹中的产品详情页代码 #

@page "/product/{id:int}"
@inject IProductService ProductService

@if(product == null)
{
    <span>Message</span>
}
else
{
    <div class="media">
        <div class="media-img-wrapper mr-2">
            <img class="media-img" src="@product.ImageUrl" alt="@product.Title">
        </div>
        <div class="media-body">
            <h2 class="mb-0">@product.Title</h2>
            <p>@product.Description</p>
            <h4 class="price">
                $@product.Price
            </h4>
        </div>
    </div>
}


@code {
    private Product? product = null;
    private string Message = string.Empty;

    [Parameter]
    public int Id { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        Message = "Loading Product...";

        var result = await ProductService.GetProductAsync(Id);
        if(!result.Success)
        {
            Message = result.Message;
        }
        else
        {
            product = result.Data;
        }
    }
}

已尝试但无效的解决方案 #

• 为产品详情页添加独立CSS文件
• 修改wwwroot/css/app.css内容如下：

.media-img{
max-height: 500px;
max-width: 500px;
border-radius: 6px;
margin: 0  10px 10px 10px;
}

.media-img-wrapper {
    max-width: 500px;
    max-height: 500px;
    text-align: center;
}

@media(max-width:  1023.98px)
{
    .media-img {
        max-width: 300px;
    }
    .media-img-wrapper{
        width:100%;
        height: auto;
    }
}

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