CSS 隔离用于 Razor 组件，该组件完全由 C# ZA2F2ED4F8EBC2CBB1D6C21A29DC40ABC 定义

Question

I have a Razor component, called RankingCell , which is fully defined with a C# class. There is not any .razor file associated to it :

// RankingCell.razor.cs
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

namespace MyProj {
    public class RankingCell: ComponentBase {
        // Some parameters and properties

        [Parameter]
        public string CellElt { get; set; }

        protected override void BuildRenderTree(RenderTreeBuilder builder) {
            /*
             * The thing which prevents me from using a "RankingCell.razor" file to define it.
             * In a .razor file it would be something like this but it is not possible:
             * 
             * <@CellElt ... >@* ... *@</@CellElt>
             * 
             * Please have a look there for for details about how I solved this issue for the component: 
             * https://stackoverflow.com/questions/64196493/in-blazor-how-can-i-dynamically-change-an-html-tag
             */
            builder.OpenElement(0, CellElt);

            // ...

            builder.CloseElement();
        }
    }
}

I would like to associate a stylesheet to my RankingCell component, so I create such a file following Microsoft's documentation about CSS isolation , ie a CSS file called RankingCell.razor.css :

/* RankingCell.razor.css */
.ranking-cell {
    /* RankingCell style */
}

But when I build my project (using dotnet build ), I have got the following error:

RankingCell.razor.css : error BLAZOR102: The scoped css file 'RankingCell.razor.css' was defined but no associated razor component was found for it.

How to fix this BLAZOR102 issue? How to manage to associate a stylesheet with my component?

The component does not look buggy. I have not got any compiling error when no CSS scoped file is associated to it and it works in my Blazor project.

I also tried to create an empty RankingCell.razor file but I had got another which told me that BuildRenderTree was defined elsewhere (of course since it is already fully written in RankingCell.razor.cs , where the component is fully defined).

Answer 1

You need to add "partial" to RankingCell.razor.cs like this:

public partial class RankingCell: ComponentBase{
}