Skip to main content

CSS In C#

Css.Module builds a scoped stylesheet in C#. Class names include the module scope, and Window.AttachGlobalStyle loads the CSS through the render host.

var styles = Css.Module(
"todo",
Css.Class("shell", rule => rule.Display("grid").Gap(14).Padding("24px")),
Css.Class("done", rule => rule.TextDecoration("line-through").Color("#667085")),
Css.Rule("& button", rule => rule.Cursor("pointer")));

var builder = UltimateAppBuilder.CreateDefaultBuilder();
var app = builder.Build();

var window = app.MainWindow = new Window();
window.AttachGlobalStyle(styles);
window.Render(ctx =>
{
var root = new Div { Class = styles["shell"] };
root.Children.Add(new Span("Ship docs") { Class = styles["done"] });
return root;
});

return await app.RunAsync();

Use Css.Class for scoped classes, Css.Rule for raw selectors, and & to refer to the module root scope. CssRuleBuilder.Set(name, value) accepts any CSS property; common properties have convenience methods.