CSS isolation for a Razor component which is fully defined with a C# class

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, i.e. 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).

What's wrong with just adding a `.razor` file, so VS knows how to organize your isolatd files? — Bennyboy1973, Apr 30 '23 at 00:32

score 0 · Answer 1 · answered Mar 29 '21 at 02:45

0

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

public partial class RankingCell: ComponentBase{
}

answered Mar 29 '21 at 02:45

yoli

1
1

It would be clearer if you say this is how you can have a .razor file and a .cs file for the same component, otherwise it could be read as a solution for the scoped CSS problem alone. – Mister Magoo Mar 29 '21 at 09:26

Alan M Risse · Answer 2 · 2023-04-29T23:22:17.777

It doesn't look like this is directly possible with .NET 6/7. The closest solution I have found is to 1) Mark the CSS file as an "Embedded Resource", 2) Have my code-only component load the CSS as a string during OnInitialized(), and 3) To then embed the loaded CSS string into the markup while rendering.

To load the CSS during OnInitialized() use something like this:


    var assembly = Assembly.GetExecutingAssembly();
    var resourceName = "YourNameSpace.YourFileTitle.css";
    using (Stream stream = assembly.GetManifestResourceStream(resourceName))
    using (StreamReader reader = new StreamReader(stream))
    {
        CSS = reader.ReadToEnd();  // CSS is a string variable
    }

See How to read embedded resource text file for more information.

Then early within RenderBuildTree(...) do something like this:

            builder.OpenElement(seq++, "style");
            builder.AddMarkupContent(seq++, CSS);
            builder.CloseElement();             // body div

CSS isolation for a Razor component which is fully defined with a C# class

2 Answers2