Bringing Back the Class Attribute for Your Blazor Components

Blazor, like many other client-side web UI frameworks, is primarily used to create and render components to the web browser. A component is essentially a custom HTML element that we can design, build, and reuse.

One of the most familiar attributes of HTML elements is the class attribute, which allows us to apply styles using a list of CSS classes.

Blazor, however, does not provide support for native HTML attributes. If you want to apply an attribute to your component, you must first define it as a parameter.

In practice, this means that applying the class attribute to a Blazor component will throw an InvalidOperationException at runtime, as Blazor fails to match the “class” name to a parameter in our component.

But what if we want to let others apply one or more CSS classes to our component?

The answer is simple: we use our own class attribute.

The way I suggest doing it is by defining a parameter named CssClass. This seems to be an unspoken pattern in both Microsoft’s own native components and in other third-party component libraries.

To illustrate, let’s say we are writing a simple button component named Button.razor.

First we define the new CssClass parameter in our code block:

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

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

Then we render this parameter to the class attribute inside our markup using a Razor expression:

<button class="btn @CssClass">@Text</button>

Now we can use this element from within our application and style it using classes as naturally as any other HTML element:

<Button CssClass="bg-red text-white" Text="Big Red Button, Do Not Click!"></Button>

You can apply this pattern and you’ll find that it’s a pretty clean way to bring back the class attribute for your Blazor components.

2 thoughts on “Bringing Back the Class Attribute for Your Blazor Components

  1. Hi, this works fine when you declare the class in a .css file. It doesn’t work when you declare the class inside a parent css isolation. I would like to declare the class in a parent css isolation.

    I think it doesn’t work becoase the css isolation asigns and extra attribute to the class.

    For exampe:
    if you declare bg-red in app.css it works fine.
    if you declare bg-red in an css isolation from a parent component it doesn’t work.

    I think it doesn’t work when you declare the class in a parent component css isolation because blazor assigns the class an extra attribute:
    .bg-red[b-391if4an4u] {
    color: red;
    }

    I hope I explain my self 😥

    Like

    1. Hi Ricardo 👋

      I haven’t used Blazor in quite a long while now but from what I can recall, this solution is implemented purely in C# with your Razor components as a regular [Parameter] on your code.

      You would write your CSS class somewhere else that has access to the global scope and then apply it via the parameter in your component markup.

      It sounds like what you’re describing is something like Scoped CSS that generates isolated component styles in your Blazor code. I’m not sure if that’s a Blazor feature yet but I don’t think it was when I wrote this article, so the best practices for doing something like this might have changed.

      Anyhow, I hope that helped. Cheers!

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s