Using Custom CSS Classes

Tesserae lets you attach custom CSS classes to any IComponent via fluent helpers on the UI static class.

Adding and removing classes

custom-styles-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("Hello"))
                .Class("my-card")
                .Class("is-highlighted");

            // Later, remove a class
            card.RemoveClass("is-highlighted");

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Class(...) and RemoveClass(...) are extension helpers in UI.Components.cs, and they work with any component implementing IComponent.

Example stylesheet

.my-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 16px;
}

.my-card.is-highlighted {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

Tips

Use CSS classes for complex visuals or when you want to reuse styles across components.
Keep layout rules in CSS when they are shared across multiple screens; use fluent APIs for per-component adjustments.

Referenced by

index